Невозможно выполнить POST-запрос на получение с помощью Django (с React/JS)

Как отправить данные с помощью POST-запроса из React/JS на сервер Django? Я могу сделать GET запрос, так что серверы работают в этом отношении.

Ошибка, которую я получаю из терминала, следующая:

[0] Forbidden (Origin checking failed - http://localhost:3000 does not match any trusted origins.): /hello/
[0] [04/Feb/2023 08:31:02] "POST /hello/ HTTP/1.1" 403 2569

Ошибка, которую я получаю из консоли браузера, следующая:

Form.jsx:47
       POST http://localhost:8000/hello/ 403 (Forbidden)

Сначала я установил npm install js-cookie и импортировал Cookies

Запрос на выборку

import Cookies from 'js-cookie'

        ...

        const response = await fetch('http://localhost:8000/hello/', {
            method: 'POST',
            headers: {
                "X-CSRFToken": Cookies.get('csrftoken'),
                "Accept": "application/json",
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                some_data: 'some_value'
            })
        });
        const data = await response.text();
        console.log(data);

urls.py

urlpatterns = [
    path('hello/', views.hello_world, name='hello_world'),
]

views.py

def hello_world(request):
    if request.method == 'POST':
        # do something with the data posted
        data = request.POST
        # return a JSON response
        return HttpResponse("Success: ")
    return HttpResponse("Error: ")

settings.py

INSTALLED_APPS = [
    ...
    'corsheaders',
]

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

# Tested using a combination of:

CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = [
    "http://localhost:3000",
]
CORS_ALLOW_METHODS = ['POST']
CORS_ALLOW_METHODS = [
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
]
CORS_ALLOW_METHODS = (
    'GET',
    'POST',
    'OPTIONS',
)
CORS_ALLOW_CREDENTIALS = True

Я также получаю эту ошибку/.text() ответ от:

const data = await response.text();
console.log(data);

Ошибка/.text() ответ

В settings.py необходимо добавить http://localhost:3000 в список доверенных источников для небезопасных запросов (например, POST).

добавьте это в ваш settings.py :

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

У меня была та же проблема, но когда я выхожу из учетной записи администратора, эта ошибка исчезает... Я не могу объяснить, почему. Но попробуйте выйти из системы и повторить попытку.

Вернуться на верх