Django Localhost CORS not working

As per http://www.w3.org/Security/wiki/Same_Origin_Policy, the requests should be from same port, scheme, and host to be considered as same origin. Here one of your server is in port 80 and the other one is on 8080.

An origin is defined by the scheme, host, and port of a URL. Generally speaking, documents retrieved from distinct origins are isolated from each other. For example, if a document retrieved from http://example.com/doc.html tries to access the DOM of a document retrieved from https://example.com/target.html, the user agent will disallow access because the origin of the first document, (http, example.com, 80), does not match the origin of the second document (https, example.com, 443).

Here in this error the hint is clearly mentioning that it needs https://

HINT: Add a scheme (e.g. https://) or netloc (e.g. example.com).

Moreover, it is also true that braces matters in django settings.

CORS_ORIGIN_WHITELIST = [
    'https://localhost:3000'
]

And the above settings work fine.

While the same settings with different brackets won't work

CORS_ORIGIN_WHITELIST = (
    'https://localhost:3000'
)

For me i used [] instead of (). Also don't add a '/' at the end url.

Something like this

CORS_ORIGIN_WHITELIST = [
    'http://localhost:3000'
]

I had the same problem. By browsing the django-cors-headers-code found my mistake was the following:

While a complete CORS-header looks like this (notice schema AND hostname):

Access-Control-Allow-Origin: https://example.com

The CORS_ORIGIN_WHITELIST setting wants it in a format that compares to urlparse.netloc (docs) of the Origin-header, which is only the host (possibly the port)

def origin_found_in_white_lists(self, origin, url):
    return (
        url.netloc in conf.CORS_ORIGIN_WHITELIST or
        (origin == 'null' and origin in conf.CORS_ORIGIN_WHITELIST) or
        self.regex_domain_match(origin)
    )

While the RegEx-whitelist compares it against the complete Origin-header.

So the correct setting (as the example in the setup-manual correctly states, but not properly describes) would be:

CORS_ORIGIN_WHITELIST = (
    'example.com',
)

Which can be a problem if you do not want your API to talk to the non-secure http-version of a website. Use the RegEx in that case.

Also note: during troubleshooting I found out that the CORS-header is completely absent if no match is found. Which means that absence of the header is not a sure indication of a complete malfunction of the middleware, but maybe just a misconfiguration.