Django 3.1: Error CORS No 'Access-Control-Allow-Origin' header

[rayzpham]

I use API to connect FE vueJS to BE django but it not response

I added the django cors header to the django setting, or CORS_ORIGIN_ALLOW_ALL = True but it still fails. I also wrote a middleware but it still failed

[udemezue John]

The problem is not the header and you don't need all this middleware stuff.

Just set the

WHITELIST in the Django settings,
Add you Vue js and Django IP to the WHITELIST

[udemezue John]

CORS_ALLOWED_ORIGINS = [
"https://example.com",
"https://sub.example.com",
"http://localhost:8080",
"http://127.0.0.1:9000"
]

Add your Vue localhost and Django localhost URL here

[Adam Johnson]

@udemezue01 I don't think your solution is helpful. Also you spammed the same comment across many open issues which was not helpful. It wasn't correct or relevant to do that. Please don't do that again.

@rayzpham I can't see why this isn't working. Did you try putting your custom middleware at the top?

[rayzpham]

@adamchainz I tried it but it still doesn't work, i don't know how to solve it

[rayzpham]

The problem is not the header and you don't need all this middleware stuff.

Just set the

WHITELIST in the Django settings,
Add you Vue js and Django IP to the WHITELIST

i tried all but it still dooesn't

[Adam Johnson]

@rayzpham I'm afraid I don't know. This package works for me, and moreover the middleware you've implemented is so simple it should definitely work. If you can provide a small project that reproduces your problem, I can look into this further.

[Bill Davis]

@rayzpham Seen similar issue after upgrading to Django 3.1.1 and django-cors-headers 3.5.0, below is settings.py - and we needed to restart apache server to see the change in the headers - if this helps.

Django==3.1.1
django-cors-headers==3.5.0
django-filter==2.4.0
djangorestframework==3.12.1

MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ORIGIN_ALLOW_ALL = True

We then were able to switch to CORS_ALLOWED_ORIGIN_REGEXES configuration, restart apache and works as expected.

[Martijn Wip]

I am running against the same error with GET. POST works. I haven't worked with other methods yet.

":3001/lokaties:1 Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/v1/location/locations' from origin 'http://localhost:3001' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response."

In my network tap I can see the options method is passed with Access-Control-Allow-Origin: *
in the header.

Django>=3.1.1,<3.2.0
Djangorestframework>=3.12.1,<3.13.0
django-rest-registration>=0.5.6,<0.6.0
googletrans>=3.0.0,<3.1.0
googlemaps>=4.4.2,<4.5.0
psycopg2>2.7.5,<2.8.0
Pillow>=5.3.0,<5.4.0
flake8>=3.6.0,<3.7.0
ptvsd==4.3.2
django-cors-headers==3.5.0

[Martijn Wip]

I found my bug. I did not read the error message well in the console. The message was (partly) :
"Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response."

What I did in my desperate attempts is also setting the Access-Control-Allow-Origin in my axios request. And as the message states quite clearly "this is not allowed"!

headers: {
Authorization: token ${token},
'Access-Control-Allow-Origin': '*',
},

So the big lesson for me is "Read the error message well and take the time what it exactly means!

[Phillip Kigenyi]

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));

[akitibala]

I found my bug. I did not read the error message well in the console. The message was (partly) : "Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response."

What I did in my desperate attempts is also setting the Access-Control-Allow-Origin in my axios request. And as the message states quite clearly "this is not allowed"!

headers: { Authorization: token ${token}, 'Access-Control-Allow-Origin': '*', },

So the big lesson for me is "Read the error message well and take the time what it exactly means!

what is solution for this? i could not understand . i am also facing same issue

[Adam Johnson]

@akitibala read the linked resources: https://github.com/adamchainz/django-cors-headers#about-cors

and do not comment on old issues