How to Enable Cors on Django Rest Framework

How can I enable CORS on Django REST Framework

The link you referenced in your question recommends using django-cors-headers, whose documentation says to install the library

python -m pip install django-cors-headers

and then add it to your installed apps:

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

You will also need to add a middleware class to listen in on responses:

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

and specify domains for CORS, e.g.:

CORS_ALLOWED_ORIGINS = [
    'http://localhost:3030',
]

Please browse the configuration section of its documentation, paying particular attention to the various CORS_ORIGIN_ settings. You'll need to set some of those based on your needs.

React to django CORS issue

Below settings work for me

CORS_ORIGIN_ALLOW_ALL = True
ALLOWED_HOSTS = [
    "127.0.0.1", 
]

CORS_ALLOWED_ORIGINS = [
    "http://127.0.0.1", 
]
CORS_ALLOW_CREDENTIALS = False

INSTALLED_APPS = [
    .....
    "corsheaders"
]

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

Access from origin 'https://example.com' has been blocked even though I've allowed https://example.com/

TL;DR

https://googledocs-clone-sbayrak.netlify.app/ is not an origin. Drop that trailing slash.

More details about the problem

No trailing slash allowed in the value of the Origin header

According to the CORS protocol (specified in the Fetch standard), browsers never set the Origin request header to a value with a trailing slash. Therefore, if a page at https://googledocs-clone-sbayrak.netlify.app/whatever issues a cross-origin request, that request's Origin header will contain

https://googledocs-clone-sbayrak.netlify.app

without any trailing slash.

Byte-by-byte comparison on the server side

You're using Socket.IO, which relies on the Node.js cors package. That package won't set any Access-Control-Allow-Origin in the response if the request's origin doesn't exactly match your CORS configuration's origin value (https://googledocs-clone-sbayrak.netlify.app/).

Putting it all together

Obviously,

'https://googledocs-clone-sbayrak.netlify.app' ===
    'https://googledocs-clone-sbayrak.netlify.app/'

evaluates to false, which causes the cors package not to set any Access-Control-Allow-Origin header in the response, which causes the CORS check to fail in your browser, hence the CORS error you observed.

Example from the Fetch Standard

Section 3.2.5 of the Fetch Standard even provides an enlightening example of this mistake,

Access-Control-Allow-Origin: https://rabbit.invalid/

and explains why it causes the CORS check to fail:

A serialized origin has no trailing slash.

How do I debug enabling CORS on my Django REST api

django-cors-headers is reasonably fool-proof and your configuration seems correct to me.

There is however a gotcha I've had issues with, which might be your problem too:

If you configure your server to serve static files without invoking Django / Python (pretty common, even on the built-in server), django-cors-headers cannot apply a CORS header to those responses. Depending on the browser, this will cause problems with asynchronous requests, fonts and sometimes even images, video and audio.

---

Related Topics