CORS issue with react and django-rest-framework

Question

I'm using react on the frontend side and Django on the backend. I using django-cors-headers for managing CORS in my Django app.

I have added the package in INSTALLED_APPS like this:-

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework.authtoken',
    'rest_framework',
    'corsheaders',
    'services',
    'feeds',
    'knox',
    'users',
]

then I have also added same in MIDDLEWARE

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',
    'django.middleware.common.CommonMiddleware',
]

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

and I'm passing CORS headers from my client-side React app like:-

const Axios = axios.create({
    baseURL: `${BASE_URL}/api`,
    timeout: 1000,

    headers: { 
        'X-Custom-Header': 'foobar', 
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*'
     }  
})

Error on frontend:-

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

I'm getting this error on my frontend console ```Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/register' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.``` — Avinash Kumar, Apr 26 '20 at 17:34

score 0 · Answer 1 · answered Apr 26 '20 at 17:27

0

Access-Control-Allow-Origin header is sent by server, not by frontend. Server also does not send this header always. Whenever client sends origin header, only then server sends Access-Control-Allow-Origin and when origin is not matched, CORS error in thrown. If you used create-react-app to bootstrap your react project, they have really nice documentation how to configure proxy, that way you dont have to configure CORS on backend. In django configuration try to remove ALLOWED_HOSTS = ['*'] line, CORS_ORIGIN_ALLOW_ALL = True should work for all.

answered Apr 26 '20 at 17:27

gautamits

1,262
9
11

Hi @gautamits, thanks for response. I tried removing ``` ALLOWED_HOSTS = ['*'] ``` still getting CORS error in my frontend. Also, I went through the documentation proxy documentation for CRA, it will only work for a development server. I need to this for both development and production – Avinash Kumar Apr 26 '20 at 18:06
Please try hitting your api with CURL with *Origin* header. Check if server is really sending any *Access-Control-Allow-Origin*. – gautamits Apr 26 '20 at 18:24

score 0 · Accepted Answer · answered May 23 '20 at 04:26

0

there was a bug in my client-side headers'X-Custom-Header': 'foobar', after removing it started working fine

answered May 23 '20 at 04:26

Avinash Kumar

11
1
4

CORS issue with react and django-rest-framework

2 Answers2

Linked