django-cors-headers not work

Question

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.gis',
    'corsheaders',
    'rest_framework',
    'world',
    'userManager',
    'markPost',
    'BasicServices',
)


MIDDLEWARE_CLASSES = (
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
)

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

Everything is normal, but did not work

here my response headers

Cache-Control: max-age=0
Content-Type: text/html; charset=utf-8
Date: Tue, 20 Jan 2015 13:16:17 GMT
Expires: Tue, 20 Jan 2015 13:16:17 GMT
Last-Modified: Tue, 20 Jan 2015 13:16:17 GMT
Server: WSGIServer/0.1 Python/2.7.8
Set-Cookie: csrftoken=snXksqpljbCLW0eZ0EElFxKbiUkYIvK0; expires=Tue, 19-Jan-2016 13:16:17 GMT; Max-Age=31449600; Path=/
Vary: Cookie
X-Frame-Options: SAMEORIGIN

Some 500 errors happen earlier than the CORS middleware, so it has no chance to add CORS headers. If the response status code was 500, this might be the issue and CORS might be working fine. — Aur Saraf, Sep 27 '16 at 18:21

score 29 · Answer 1 · answered Apr 18 '19 at 18:58

29

I was having this same issue and everything seemed to be in the right place. Then I figured out that I had started the server before adding 'corsheaders.middleware.CorsMiddleware', to the MIDDLEWARE_CLASSES. After making the correction, it was still not working. After trying a bunch of stuff, I opened it in another browser and it worked. So it turned out that I just needed to clear the browser cache.

answered Apr 18 '19 at 18:58

bitigital

299
3
2

7

Clearing the browser cache did it for me as well! – Kendall Dec 25 '19 at 08:19

score 24 · Answer 2 · answered Mar 03 '15 at 14:39

24

According to the process_response code from CorsMiddleware:

response[ACCESS_CONTROL_ALLOW_ORIGIN] = "*" if (
            settings.CORS_ORIGIN_ALLOW_ALL and
            not settings.CORS_ALLOW_CREDENTIALS) else origin

You must set settings like this:

# CORS Config
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = False

answered Mar 03 '15 at 14:39

danius

2,664
27
33

Where should I add this response ? – Pratik Sharma Jan 21 '21 at 19:07

score 23 · Answer 3 · edited Sep 17 '19 at 16:34

23

Do not forget to add

'corsheaders.middleware.CorsMiddleware',

at top of MIDDLEWARE variable :

See docs :

CorsMiddleware should be placed as high as possible, especially before any middleware that can generate responses such as Django's CommonMiddleware or Whitenoise's WhiteNoiseMiddleware. If it is not before, it will not be able to add the CORS headers to these responses.

edited Sep 17 '19 at 16:34

Manu Artero

9,238
6
58
73

answered Jan 05 '18 at 15:02

Gohmz

1,256
16
31

2

This is SUPER important. I had some other middleware declared before corsmiddleware and it failed silently. – jeudyx Jul 03 '20 at 20:51

bhaskarc · Answer 4 · 2019-09-29T08:48:10.470

16

Somehow django-cors-headers would not work for me with Django 2 despite following all the steps. The pre-flight check would retrun a 405 error.

I ended up writing a small middleware:

from django import http


class CorsMiddleware(object):
    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):
        response = self.get_response(request)
        if (request.method == "OPTIONS"  and "HTTP_ACCESS_CONTROL_REQUEST_METHOD" in request.META):
            response = http.HttpResponse()
            response["Content-Length"] = "0"
            response["Access-Control-Max-Age"] = 86400
        response["Access-Control-Allow-Origin"] = "*"
        response["Access-Control-Allow-Methods"] = "DELETE, GET, OPTIONS, PATCH, POST, PUT"
        response["Access-Control-Allow-Headers"] = "accept, accept-encoding, authorization, content-type, dnt, origin, user-agent, x-csrftoken, x-requested-with"
        return response

Then added this middleware in my settings.py :

MIDDLEWARE = [
    'apps.core.middleware.CorsMiddleware',
     ... others below it
]

This did the trick for me.

edited Sep 29 '19 at 08:48

answered Sep 29 '19 at 06:57

bhaskarc

9,269
10
65
86

6

django-cors-headers is trash. I just wanted to enable ACAO for all requests, spent an half of an hour to force it work, it started working locally but under basic auth in prod or due to another reason it does nothing, quietly nothing. Developers overcomplex it. On couponing this code I spend 1 minute, and it works perfectly everywhere. – Ivan Borshchov May 20 '20 at 11:01
This worked for me, and I followed [this middleware tutorial](https://stackoverflow.com/a/32242074/5671180) – Adonis Gaitatzis Jan 16 '21 at 17:45
django-cors-headers always had issues for me, but this did. Thank you! – Chiah Soon Apr 03 '21 at 09:51
1

Treid 10+ solutions related to django-cors-headers. None of them worked for a boilerplate I created from cookiecutter with a react frontend running separately. This is the only option that worked for me. To stop using django-cors-headers and use this custom middleware. – crazydiv Dec 05 '22 at 12:47
I spent an entire day, this solved it instantly. There is some very obscure reason why django-cors-headers has issues. – nadermx Feb 17 '23 at 22:12

score 12 · Answer 5 · answered Nov 14 '15 at 04:47

If you are testing this you need to ensure you include at least the Origin header in the request.

E.g.:

$ http GET http://127.0.0.1:8000/todos/ Origin:http://www.someorigin.com
HTTP/1.0 200 OK
Access-Control-Allow-Origin: *
Allow: GET, POST, HEAD, OPTIONS
Content-Type: application/json
Date: Sat, 14 Nov 2015 04:42:38 GMT
Server: WSGIServer/0.1 Python/2.7.10
Vary: Accept, Cookie
X-Frame-Options: SAMEORIGIN

You will get more feedback with a preflight CORS request:

$ http OPTIONS http://127.0.0.1:8000/todos/ Origin:http://www.someorigin.com
HTTP/1.0 200 OK
Access-Control-Allow-Headers: x-requested-with, content-type, accept, origin, authorization, x-csrftoken, user-agent, accept-encoding
Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, OPTIONS
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 86400
Allow: GET, POST, HEAD, OPTIONS
Content-Type: application/json
Date: Sat, 14 Nov 2015 04:45:37 GMT
Server: WSGIServer/0.1 Python/2.7.10
Vary: Accept, Cookie
X-Frame-Options: SAMEORIGIN

score 8 · Answer 6 · edited Apr 27 '21 at 12:34

8

I spent a couple of hours and tried a lot of solutions to fix this. I think we need to followed the steps mentioned here

One more step: Finally it works after I added:

CORS_ALLOW_HEADERS = ['*']

after:

ALLOWED_HOSTS=['*']

CORS_ORIGIN_ALLOW_ALL = True

I think it allows all the headers including Authorization.

edited Apr 27 '21 at 12:34

Marwen Jaffel

703
1
6
14

answered Apr 27 '21 at 03:11

bin zhang

81
1
1

score 7 · Answer 7 · answered Aug 20 '15 at 10:37

7

I guess corsheaders and clickjacking middlewares are not compatible. At least I got rid off X-Frame-Options header when I commented out django.middleware.clickjacking.XFrameOptionsMiddleware.

I've just CORS_ORIGIN_ALLOW_ALL = True setting.

answered Aug 20 '15 at 10:37

Aapo Rista

121
1
4

Yes! `CORS_ORIGIN_ALLOW_ALL = True` Added to `settings.py ` it works perfectly for me, for my local development. – Sabbir Sobhani Aug 25 '21 at 17:12

score 4 · Answer 8 · answered Feb 04 '21 at 02:34

I tried installing django-cors-headers to fix the error I was getting when running my django app with production settings.

' URL ' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

My app loads fine when running in development and installing django-cors-headers did not resolve the issue. For some reason chrome was blocking Material icons from loading when I was in production.

Once I discovered what the issue was I felt it was important to share how I fixed it as I feel a lot of people coming to this question will have the same circumstances.

This solution will hopefully work for those who are serving their static content (like images) from another server such as an AWS S3 bucket like I was and getting this error.

If you are and it is being blocked by chrome in the same way, installing django-cors-headers won't do anything. This is because the problem lies with the configuration of the S3 bucket (Azure etc) and not the django app.

Go to the AWS S3 dashboard and once you select the bucket you are using to host the static files of your django app, click on the permissions tab.

Scroll down to the cross-origin resource sharing (CORS) section and click 'Edit'.

And if you want to just resolve the issue completely (for just serving static files blocked by chrome), enter the following JSON and then click 'Save changes' at the bottom.

[
    {
        "AllowedHeaders": [],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

There is more information here on how to configure your S3 bucket's CORS configuration.

After saving this configuration the error went away and my icons loaded properly.

Footnote:

Given I was also misunderstanding how the Access-Control-Allow-Origin header worked I have taken an image from Mozilla's Doc's on Cross-Origin Resource Sharing but edited it to show my situation to hopefully explain how the header works.

Imagine that Chrome and localhost were exchanging mail and all of a sudden chrome starts getting mail from AWS but it doesn't have Chromes name of it. Good guy Chrome is thinking, uh I don't know if I should be viewing this information, it isn't from the origin (localhost) so I don't know if I'm allowed and it could be sensitive information sent by mistake. Therefore I won't open it.

The Allow-Access-Control-Origin header is S3 writing on that mail 'it's ok, you (Chrome) have permission to view the information in this mail'.

django-cors-headers is necessary for situations were you have an app hosted on a server A (origin) that is making requests to a django app on server B, that is not the origin. For example, if your django app was a rest api hosted on heroku and you had a react/angular app hosted on Azure that made requests to that api - then your django app would need it.

score 2 · Answer 9 · answered May 31 '18 at 14:29

2

From Django 2 MIDDLEWARE_CLASSES is changed to MIDDLEWARE. In this case if you have Django 2 make sure the MIDDLWARE is as it should be such that MIDDLEWARES get executed.

answered May 31 '18 at 14:29

Euron Metaliaj

29
1

score 1 · Answer 10 · answered Aug 20 '19 at 07:00

Final solution would be send response with CORS allowed headers.

response["Access-Control-Allow-Origin"] = "*"
response['Content-Type'] = "application/json; charset=utf-8"
response["Access-Control-Allow-Origin"] = "*"
response["Access-Control-Allow-Methods"] = "GET, OPTIONS"
response["Access-Control-Max-Age"] = "1000"
response["Access-Control-Allow-Headers"] = "X-Requested-With, Content-Type, My-Token"

score 1 · Answer 11 · answered Nov 16 '20 at 15:16

For me I had to add non-standard headers. Even if CORS_ORIGIN_ALLOW_ALL = True is set, it will still check if the headers are allowed.

from corsheaders.defaults import default_headers

CORS_ALLOW_HEADERS = list(default_headers) + [
    'my-custom-header',  
]

The same can be done for non-standard methods:

from corsheaders.defaults import default_methods

CORS_ALLOW_METHODS = list(default_methods) + [
    'POKE',
]

score 1 · Answer 12 · answered Sep 11 '21 at 03:43

1

I added 'corsheaders.middleware.CorsMiddleware' at the top of middleware array and it worked for me.

answered Sep 11 '21 at 03:43

Ramesh Shah

291
2
7

score 0 · Answer 13 · answered Apr 10 '20 at 07:00

0

django-cors-headers works perfectly for handling CORS policy issue.

After doing the above steps, just try to clear browser cache or try making same request in chrome(incognito) or firefox(private window).

answered Apr 10 '20 at 07:00

Nitish Chauhan

375
4
7

Clearing the Browser cache worked for me! – gowthz May 17 '21 at 11:00

score 0 · Answer 14 · edited Jul 20 '20 at 11:04

0

Are you trying to use the url inside an iframe?

If that is the case, then the header X-Frame-Options: SAMEORIGIN might be causing a problem.

To fix it remove the middleware, django.middleware.clickjacking.XFrameOptionsMiddleware.

edited Jul 20 '20 at 11:04

vvvvv

25,404
19
49
81

answered Jul 20 '20 at 10:49

dr cp

1

score 0 · Answer 15 · answered Jan 13 '22 at 00:12

0

If none of the mentioned settings (After CORS installation and changing configs in settings.py) works, just turn off your adblocker if that is enabled for your local website. This small configuration worked for me.

answered Jan 13 '22 at 00:12

Dishu Patel

11
1

score 0 · Answer 16 · answered Apr 04 '22 at 08:08

For those who have CORS error for FONTS
For me the problem was solved by changing apache config.

add these lines of code to VirtualHost or .htaccess

for apache server, this file is in this directory: /etc/apache2/sites-enabled/
important if ssl certificate is enabled for your website, these codes should be added to ssl config file

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css|woff2)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

Abhi kumar · Answer 17 · 2022-09-11T05:23:22.560

0

For me it was solved by CORS_ALLOW_HEADERS = ['*']

edited Sep 11 '22 at 05:23

answered Sep 11 '22 at 05:22

Abhi kumar

11
3

w8dsx · Answer 18 · 2022-10-31T18:05:25.680

I was struggling to get a REACT app with Axios to connect to Django 4.1.1 with a routine set of API endpoints implemented with Django Rest Framework (DRF). The failure I was observing was that Django was NOT providing the "'Access-Control-Allow-Origin" response expected by Axios, during the preflight check for CORS.

There is a lot of chatter on Stackoverflow and elsewhere stating that this issue is caused by a failure to set proper headers with Axios, or that the simple steps to do basic setup of django-cors-headers would solve the issue (described at this link [django-cors-headers documentation]).

The most basic setup for django-cors-headers does not cause Django to respond properly to Axios during the preflight check. After setting:

CORS_ALLOW_HEADERS = ['*']
ALLOWED_HOSTS=['*']
CORS_ORIGIN_ALLOW_ALL = True

in settings.py, Django correctly responded to the preflight check. This must be set in conjunction with the basic setup of django-cors-headers.

Note that my goal was simply to get a development environment working, not to deploy this in a production scenario. This works with the built in "server" for Django development (python3 manage.py runserver), using a React app also running as a development server with "npm start".

Of course for a production environment, the CORS settings above must be dialed in to ensure security, and I am not attempting to address that here. My only goal was to save other developers hours of searching, just to get a development environment up and running.

Also note that while Axios enforces CORS, "fetch" does not, and using a script that was auto generated by Postman would completely avoid the CORS issues. However, I wanted to use Axios, and was left no choice but to address this issue.

score 0 · Answer 19 · answered Oct 21 '22 at 11:37

0

`CORS_ORIGIN_ALLOW_ALL = True
 CORS_ALLOW_CREDENTIALS = True
 CORS_ALLOW_HEADERS = ["*"]
 ALLOWED_HOSTS = ['*']`

answered Oct 21 '22 at 11:37

Pascal M

21
3

score 0 · Answer 20 · answered Apr 22 '23 at 12:32

Also, check if the django-cors-headers package has been installed properly and if the package and its dependencies have not been manipulated while doing something like pip freeze and pip install.Check if that might be the issue likewise me. In that scenario just do:

pip install django-cors-headers

make a fresh requirements.txt using

pip freeze > requirements.txt

Worked for me because I removed and updated multiple packages. So one of that actions misconfigured django-cors which caused CORS issues when the client tried to connect with the backend server.

score 0 · Answer 21 · edited Aug 09 '23 at 13:21

0

In my case the response was not passing any cors hearders in pre-flight request. Hence I added the below and it worked.

In settings file add the below.

CORS_ALLOW_HEADERS = ["*"]

edited Aug 09 '23 at 13:21

toyota Supra

3,181
4
15
19

answered Aug 09 '23 at 02:53

prasanth ramchandra

1

score 0 · Answer 22 · answered Aug 21 '23 at 10:20

0

you must add something like this to settings.py

CORS_ALLOWED_ORIGINS[ 'https://YOUR-ADDRESS', ]

answered Aug 21 '23 at 10:20

Omid Farvid

785
7
13

score -1 · Answer 23 · answered Jan 17 '23 at 03:36

-1

In my case adding CSRF_TRUSTED_ORIGINS fixed the problem.

CSRF_TRUSTED_ORIGINS = [
    "http://localhost:8000",
    "http://127.0.0.1:8000",
    "http://website-url.com",
    "https://website-url.com",
]

It works without corsheaders too.

answered Jan 17 '23 at 03:36

Exit load

1
1

score -1 · Answer 24 · answered Jun 22 '23 at 22:32

-1

CORS_ALLOW_ALL_ORIGINS = True

All problem is solved. Using in Setting.py file.

answered Jun 22 '23 at 22:32

SOUROV.Sarkar

299
2
4

score -2 · Answer 25 · edited May 27 '20 at 22:42

This worked for me:

python -m pip install django-cors-headers

MIDDLEWARE = [  
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

`ALLOWED_HOSTS = ['*']`

`CORS_ORIGIN_ALLOW_ALL = True`

Make sure to include: corsheaders.middleware.CorsMiddleware, as high as possible

For reference: https://pypi.org/project/django-cors-headers/, https://docs.djangoproject.com/en/3.0/ref/settings/

score -2 · Answer 26 · answered Jul 01 '20 at 21:55

-2

What I did was depreciate the version of django-cors-headers for it to work. I moved from version 3.2.1 to 2.4.0. You can do that by installing the specific version using pip

pip install django-cors-headers==2.4.0

answered Jul 01 '20 at 21:55

Aminu Israel

1
2

django-cors-headers not work

26 Answers26

This solution will hopefully work for those who are serving their static content (like images) from another server such as an AWS S3 bucket like I was and getting this error.

Linked