Cross-Origin Request Blocked Django and React

Question

I have installed pip install django-cors-headers still not working

added into the settings.py file

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

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

Django Rest Framework

Does this help: https://stackoverflow.com/questions/44037474/cors-error-while-consuming-calling-rest-api-with-react? — ruddra, Dec 23 '20 at 08:38
nope its not working .. I tried everything source code: https://github.com/avichhetri8/djangowithreact branch dev — Abi Chhetri, Dec 23 '20 at 08:42
try adding `corsheaders.middleware.CorsMiddleware` as first item i the `MIDDLEWARES` list — Adithya, Dec 23 '20 at 09:15
yes it is above `corsheaders.middleware.CorsMiddleware` please check the source code https://github.com/avichhetri8/djangowithreact/blob/dev/ecom/settings.py — Abi Chhetri, Dec 23 '20 at 09:18
Nope i have not used any of those .... please check my source code https://github.com/avichhetri8/djangowithreact/tree/dev — Abi Chhetri, Dec 25 '20 at 01:52
Its not working after adding CORS_ALLOW_ALL_ORIGINS = True inside settings.py — Abi Chhetri, Dec 25 '20 at 01:53

score 2 · Accepted Answer · answered Jan 28 '21 at 10:50

I also had same issue in project solution that i got is

Place corsheaders.middleware.CorsMiddleware at the top

MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
..........
..........
]

ALLOWED_HOSTS = ['*']
Add at the bottom of the settings.py
```
 CORS_ORIGIN_ALLOW_ALL = True
```

According to Documentation 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.

Also if you are using CORS_REPLACE_HTTPS_REFERER it should be placed before Django’s CsrfViewMiddleware (see more below).

score 1 · Answer 2 · answered Dec 23 '20 at 14:10

Usually, for such error you need to update settings.py with django-cors-headers:

# update backend/server/server/settings.py
# ...
INSTALLED_APPS = [
    #...
    'corsheaders', # add it here
    #...
]

# define which origins are allowed
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
    "http://127.0.0.1:3000"
]

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

Sometimes you also need to set ALLOWED_HOSTS=["127.0.0.1"] or with your other address (you can also try with "*", but just for debug).

You can check details in my article: React Token Based Authentication to Django REST API Backend.

Please also try to run tests with a cleared cache in the web browser.

If that doesn't help please provide more details about your project setup.

please check my source source its not working https://github.com/avichhetri8/djangowithreact/blob/dev/ecom/settings.py — Abi Chhetri, Dec 24 '20 at 10:49

Cross-Origin Request Blocked Django and React

2 Answers2