Отсутствует CORS-заголовок 'Access-Control-Allow-Origin' в React и Django

У меня есть приложение React frontend, которому нужно отправить запрос на мой Backend, написанный на Django

Но у меня возникают проблемы с CORS, а точнее, CORS-заголовок 'Access-Control-Allow-Origin is missing.
Я нашел много вопросов на stackoverflow о том, как нужно установить django-cors-headers, но это просто не работает для меня.

моя текущая конфигурация бэкенда:

settings.py

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

MIDDLEWARE = [
'debug_toolbar.middleware.DebugToolbarMiddleware',
'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',
'django.middleware.locale.LocaleMiddleware',
'simple_history.middleware.HistoryRequestMiddleware',
]

ALLOWED_HOSTS = ["*"]
CORS_ALLOWED_ORIGINS = ["http://localhost:3000"]
CSRF_TRUSTED_ORIGINS = ["http://localhost:3000"]

CORS_ALLOW_METHODS = [
    "DELETE",
    "GET",
    "OPTIONS",
    "PATCH",
    "POST",
    "PUT",
]
CORS_ALLOW_HEADERS = [
    "accept",
    "accept-encoding",
    "authorization",
    "content-type",
    "dnt",
    "origin",
    "user-agent",
    "x-csrftoken",
    "x-requested-with",
]

views.py (где я создаю api)

@csrf_exempt
@api_view(["POST"])
@permission_classes([AllowAny])
@xframe_options_exempt
def create_user_and_ci(request):
    try:
        # code to execute
        return Response({"status": "Succes"}, status.HTTP_200_OK)
    except:
        return Response({"status": "Error"}, status.HTTP_500_INTERNAL_SERVER_ERROR)

А затем на моем фронтенде я выполняю следующее:

  fetch(`https://myexampledomain.com/ci/get/${est}`, {
    headers: {
      Authorization: `Token ${localStorage.getItem("token")}`,
      'Content-Type': 'application/json'

    },
  }).then((res) => console.log(res))

Прежде всего, эта ошибка CORS связана с тем, что ваш фронтенд не находится на том же домене, что и ваш Django API/Backend, поэтому все ответы Django должны содержать CORS-заголовки здесь.

Я нашел этот пост о добавлении пользовательского HTTP-заголовка с помощью промежуточного ПО в Django, это может помочь вам здесь.

Установите этот пакет:

    pip install django-cors-headers 

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

CORS_ALLOWED_ORIGINS = [
http://127.0.0.1:3000, #For React Project
http://127.0.0.1:8000  #For Django Project
]

В MiddleWare добавьте это в список

MIDDLEWARE = [
    
    "corsheaders.middleware.CorsMiddleware",]
Вернуться на верх