Django+React : Политика CORS: Поле заголовка запроса access-control-allow-methods не разрешено Access-Control-Allow-Headers в префлайт-ответе

Я использую Django для бэкенда и React для фронтенда. Когда я пытаюсь отправить POST запрос, я получаю :

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

Я объединил множество ответов, которые я нашел, например Как использовать csrf_token в Django RESTful API и React? и Django и React: csrf cookie не устанавливается в заголовке запроса но все равно не повезло.

  1. 'corsheaders' находится в моих УСТАНОВЛЕННЫХ APPS
  2. Настройки промежуточного ПО
MIDDLEWARE = [
    
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',

    'corsheaders.middleware.CorsMiddleware',
    
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',

    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
  1. Настройки СОРС: 
CORS_ORIGIN_ALLOW_ALL = True

CORS_ALLOW_METHODS = [
    "DELETE",
    "GET",
    "OPTIONS",
    "PATCH",
    "POST",
    "PUT",
]

CORS_ORIGIN_WHITELIST = (
'http://localhost:3000',
)

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

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

from corsheaders.defaults import default_headers
CORS_ALLOW_HEADERS = default_headers + ('cache-control',)
  1. Django view.py
from django.shortcuts import render
from django.views.generic.edit import CreateView
from .forms import PackageForm

from django.utils.decorators import method_decorator
from django.views.decorators.csrf import ensure_csrf_cookie

class PackageFormView(CreateView):

    form_class = PackageForm
    initial = {'key': 'value'}
    template_name = 'package_form.html'

    def get(self, request, *args, **kwargs):
        form = self.form_class(initial=self.initial)
        return render(request, self.template_name, {'form': form})

    @method_decorator(ensure_csrf_cookie)
    def post(self, request, *args, **kwargs):

        form = self.form_class(request.POST)
        if form.is_valid():

            form.save()

        return render(request, self.template_name, {'form': form})
  1. Реагировать на вызов
var csrftoken = getCookie("csrftoken");

    function getCookie(name) {
      var cookieValue = null;
      if (document.cookie && document.cookie !== "") {
        var cookies = document.cookie.split(";");
        for (var i = 0; i < cookies.length; i++) {
          var cookie = jQuery.trim(cookies[i]);
          if (cookie.substring(0, name.length + 1) === name + "=") {
            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
            break;
          }
        }
      }
      return cookieValue;
    }

    const cors = {
      "X-CSRFToken": csrftoken,
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Credentials": "true",
      "Access-Control-Allow-Methods":
        "POST, GET, PUT, DELETE, OPTIONS, HEAD, authorization",
      "Access-Control-Allow-Headers": "*",
      "Content-type": "application/json",
      "withCredentials": "true",
    };

    axios
      .post(
        baseURL,
        {
          title: "title from react",
          description: "description from react",
          "withCredentials": "true",
        },
        {
          headers: cors,
        }
      )
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
  };

Я уже потратил около 10 часов на это, я все еще не могу найти как это исправить.

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