"No 'Access-Control-Allow-Origin' header is present on the requested resource" in django

I am newbie to django and using it as back end for an application that creates users. In front end the code for posting the user name is :

var xobj = new XMLHttpRequest();
              xobj.overrideMimeType("application/json");
              xobj.open('POST', "http://www.local:8000/create_user/", true);
                xobj.setRequestHeader("Access-Control-Allow-Origin", "*");
              xobj.onreadystatechange = function () {
                  if (xobj.readyState == 4 && xobj.status == "200") {
                      console.log(xobj.responseText);
                  }
            }
              xobj.send(json);    

On back end the function associated with url handles json but i am getting the error "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.local:54521'; is therefore not allowed access". What is the solution for this problem? Also I have followed the steps from "https://gist.github.com/strogonoff/1369619";, but problem persists.

Here's what I did when I got the same error from Django Rest Framework while sending an API request from Restangular. What this does is add CORS (Cross-Origin Resource Sharing) headers to responses from Django Rest Framework. Not having CORS headers was the cause of the error.

In the Django Project root folder (where the manage.py file is located), do:

pip install django-cors-headers

I tried it using virtualenv but was not able to get it to work, so I installed it without switching to virtualenv and got it installed.

After installing it, you have to make some edits to your django settings.py

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

MIDDLEWARE_CLASSES = (
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
)

CORS_ORIGIN_ALLOW_ALL = True   

Setting above to true allows all origins to be accepted.

References: https://github.com/ottoyiu/django-cors-headers

In my case, I had simply forgotten to add a trailing slash at the end of the REST API URL. ie, I had this:

http://127.0.0.1:8000/rest-auth/login

Instead of this:

http://127.0.0.1:8000/rest-auth/login/

Your front and back end are on different ports which means your ajax requests are subject to cross origin security.

You need to set up the back end to accept requests from different origins (or just different port numbers).

Try reading up on CORS and more specifically looking at django cors headers

If using django for backend, you need to do the following 6 things:

• ensure you are in the virtualenv, then 'pip install django-cors-headers'

• add the following in your INSTALLED-APPS section of the settings.py: 'corsheaders',

• add the following in the MIDDLEWARE section of the settings.py: 'corsheaders.middleware.CorsMiddleware',
  'django.middleware.common.CommonMiddleware',

• add either of the following at the bottom of the settings.py:
  CORS_ORIGIN_ALLOW_ALL = True or
  

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

• When using CORS_ORIGIN_WHITELIST, use the URL of the front end app where the GET Or POST request is coming from.

• Another gotcha is ensuring the URL pointing to django ends with a trailing slash.

If django-cors-headers not resolved the problem try manual add Access-Control-Allow-Origin like this:

@api_view(['GET'])
def swanger(request):
  resutl = {'a': 1}
  resp = JsonResponse(resutl)
  resp['Access-Control-Allow-Origin'] = '*'
  return resp  

I faced the same issue.

user3785412's answer will work. but, first time it may not work directly because of browser cache. either try in another browser or clear cache before loosing hope.

I had API server in Django 2 hosted on Heroku and Angular 7 Client on Firebase. I made all changes in settings.py as per user3785412 and still it would not work, wasted almost 3 hours. Then came across on post which suggested cache could be issue. opened in chrome and voila!

Hope this helps! (My first answer here, please go easy)

I have observed this error in 3 scenarios:

1. When the URL didn't end with /.
2. When URL had slashes like // or ///.
3. When my server was not working. But after switching it on it worked fine.

in my case it was localhost:8000 while 127.0.0.1 was expected... changing localhost to 127.0.0.1 in my browser did the trick

Add following line in middleware classes > 'corsheaders.middleware.CorsPostCsrfMiddleware'

so overall implementation would be:

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

MIDDLEWARE_CLASSES = (
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'corsheaders.middleware.CorsPostCsrfMiddleware'

    ...
)

CORS_ORIGIN_ALLOW_ALL = True   

check documentaion below for more info

Old question, but I'm not seeing this solution, which worked for me, anywhere. So hoping this can be helpful for someone.

Cross-origin requests in this context are only possible if the partner site's server allows it through their response headers.

I got this to work in Django without any CORS middleware by setting the following headers on the response:

response["Access-Control-Allow-Origin"] = "requesting_site.com"
response["Access-Control-Allow-Methods"] = "GET"
response["Access-Control-Allow-Headers"] = "requesting_site.com"

Most answers on StackOverflow seem to mention the first one, but not the second two. I've just confirmed they are all required. You'll want to modify as needed for your framework or request method (GET, POST, OPTION).

p.s. You can try "*" instead of "requesting_site.com" for initial development just to get it working, but it would be a security hole to allow every site access. Once working, you can restrict it for your requesting site only to make sure you don't have any formatting typos.

i was using python 2.7 and due to some reasons i cannot change the python version to version 3 and it took me 3 hours to find a solution which is :

response =  HttpResponse(json.dumps(result), content_type="application/json")
response["Access-Control-Allow-Origin"] = '*'
response["Access-Control-Allow-Methods"] = 'GET,PUT, OPTIONS'
response["Access-Control-Max-Age"] = '1000'
response["Access-Control-Allow-Headers"] = 'X-Requested-With, Content-Type'
return response

Add redirect: 'follow' to the headers on the client

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: raw,
  redirect: 'follow'
};

fetch("http://www.example.com/auth/token/login/", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

I try the above answers with favs but all not work. When I read again the terminal prompts and I found a warning: MIDDLEWARE_CLASSES is not compatible to the debug environment, use MIDDLEWARE. I found the MIDDLEWARE settings and add 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', to it and it worked.

Sigh