Error when reactjs requests from Django server (403 error / CORS)

Question

I have a reactjs project that makes requests using API to django-rest-framework. It was working fine before, but I'm not sure what made it stop working.

I'm already using django-cors-headers.

My settings.py:

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

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

CORS_ALLOW_ALL_ORIGINS = True

My reactjs request:

fetch('/api/user/', {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(obj)
})

The error I got in the django terminal:

Forbidden: /api/user/
[06/Oct/2021 01:15:31] "POST /api/user/ HTTP/1.1" 403 58

Error in console and network tabs in reactjs browser:

// console error:
UserPage.js:65 POST http://localhost:3000/api/user/ 403 (Forbidden)

//network error:
Referrer Policy: strict-origin-when-cross-origin

//Preview in Networks tab:
detail: "CSRF Failed: CSRF token missing or incorrect."

UPDATE my reactjs terminal:

Local:            http://localhost:3000
On Your Network:  http://172.22.192.1:3000

When I open my react project using http://172.22.192.1:3000 it works fine, but using http://localhost:3000 it still can't send a POST request.

I'm not sure why some downvoted, if I'm missing something let me knwo so I can add it. — Etch, Oct 05 '21 at 23:52

Rvector · Answer 1 · 2021-10-06T18:01:33.047

0

To resolve your issue, you can use CORS_ORIGIN_WHITELIST instead of CORS_ALLOW_ALL_ORIGINS in the Django settings file.

REPLACE :

CORS_ALLOW_ALL_ORIGINS = True

BY :

CORS_ORIGIN_WHITELIST = (
    'http://localhost:3000',  # React default port = 3000
    'http://localhost:8000',  # Django default port = 8000
)
# Change the url to suit your needs.

NB : The CORS_ALLOW_ALL_ORIGINS define to True must allow all origins, but i faced the same issue before and replace it by CORS_ORIGIN_WHITELIST solved it. Then try it.

Update for Django CSRF-TOKEN : This link may solve your issue about csrf_token

edited Oct 06 '21 at 18:01

answered Oct 06 '21 at 09:40

Rvector

2,312
1
8
17

Tried it but no luck. – Etch Oct 06 '21 at 12:12
I added a new error that I found in the networks tab, does this mean that I should add a token? – Etch Oct 06 '21 at 12:20
Are you using [SessionAuthentication](http://www.django-rest-framework.org/api-guide/authentication#sessionauthentication) ? On your api ? – Rvector Oct 06 '21 at 12:29
I don't think so, I do have a superuser but when requesting I don't require any login or authentication. – Etch Oct 06 '21 at 12:34
When I opened the browser using this: http://172.22.192.1:3000, It worked. But still doesn't work using: http://localhost:3000 – Etch Oct 06 '21 at 12:34
In your api `views.py` file add `from django.views.decorators.csrf import csrf_exempt`. After that, wrap the views in the `urls.py` file by the decorator like this : `url("api/users/', csrf_exempt(UserApiView.as_view())),` – Rvector Oct 06 '21 at 12:38
Have you added `'http://localhost:3000'` in `CORS_ORIGIN_WHITELIST` also ? – Rvector Oct 06 '21 at 12:40
Tried ```path('user/', csrf_exempt(views.getUserBills))``` in urls.py ```@csrf_exempt @api_view(['GET', 'POST']) def getUserBills(request):``` in views.py Still got the same error. and yes I added ```'http://localhost:3000'``` – Etch Oct 06 '21 at 12:50

Error when reactjs requests from Django server (403 error / CORS)

1 Answers1