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
– Etch, Commented Oct 5, 2021 at 23:52

Rvector · Accepted Answer · 2021-10-06 18:01:33Z

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 6, 2021 at 18:01

answered Oct 6, 2021 at 9:40

Rvector

2,4721 gold badge11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Etch Over a year ago

Tried it but no luck.

Etch Over a year ago

I added a new error that I found in the networks tab, does this mean that I should add a token?

Rvector Over a year ago

Are you using SessionAuthentication ? On your api ?

Etch Over a year ago

I don't think so, I do have a superuser but when requesting I don't require any login or authentication.

Etch Over a year ago

When I opened the browser using this: 172.22.192.1:3000, It worked. But still doesn't work using: localhost:3000

|

Collectives™ on Stack Overflow

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

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related