Cannot use fetch with Django: blocked by CORS policy although CORS is set up in Django

Question

There are many solutions on SO for this problem. Some are extremely detailed (e.g. this one). However, although I think I have followed the setup instructions explicitly, I still cannot get it to work. Can someone please point out my error?

js

let endpoint = 'http://192.168.4.28:8000/test-put'
const form_data = new FormData();

form_data.append("payload", payload);

await fetch(endpoint, {
    credentials: "include",
    method: "PUT",
    body: form_data,
    headers: {
        "X-CSRFToken": getCookie("csrftoken"),
    },
})

urls.py

path('test-put/', views.TextPut.as_view()),

views.py

class TextPut(View):
    def put(self, request):
        return {}

settings.py

...
ALLOWED_HOSTS = ['192.168.4.28']
...
CORS_ALLOWED_ORIGINS = [
    'http://localhost:8888',
]

CSRF_TRUSTED_ORIGINS = [
    'http://localhost:8888',
]

CORS_ALLOW_CREDENTIALS = True
...
INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]
...
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
    'django.middleware.common.CommonMiddleware',
    ...
]
...
CORS_ALLOW_METHODS = [
    'GET',
    'PUT',
    'POST',
]

This produces the error:

Access to fetch at 'http://192.168.4.28:8000/test-put' from origin 'http://localhost:8888' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I don't see the endpoint's host/port (192.168.4.28:8000) in `settings.py`. Are you using a proxy maybe? Or you just did not add the actual host to the settings? — Dauros, Mar 24 '23 at 15:13
Have you allowed method `PUT` and request header `X-CSRFToken` in your CORS configuration? — jub0bs, Mar 24 '23 at 16:09
So you access the Django app on `192.168.4.28:8000` but enabled CORS access only for a different address: `http://localhost:8888`? — Dauros, Mar 24 '23 at 16:51
@Dauros That's because localhost:8888 is a local netlify server and 192.169.24.8:8000 is a Django server providing an api for the netlify web pages — Psionman, Mar 24 '23 at 17:09
@Psionman Can you add the full error message? The last part is missing. — jub0bs, Mar 24 '23 at 17:09
@Psionman Have you allowed credentials in your CORS configuration? — jub0bs, Mar 24 '23 at 17:12
@jub0bs - Yes I have - see updated question - different error now - it's shifted to crsf :( 403 (Forbidden) — Psionman, Mar 24 '23 at 17:21

score 0 · Answer 1 · answered Mar 25 '23 at 08:52

Thanks to @Dauros and @Jub0s I now have a minimal set of CORS settings that solve this problem

settings.py

...
# CORS Settings
CORS_ALLOWED_ORIGINS = [
    'http://localhost:8888',
]

CORS_ALLOW_CREDENTIALS = True

CORS_ALLOW_METHODS = [
    'GET',
    'POST',
]
...

Cannot use fetch with Django: blocked by CORS policy although CORS is set up in Django

1 Answers1

Linked