Как разрешить CORS из запроса Axios get в бэкенде Django?

Я искал решение этой проблемы, но, похоже, ничего не работает. Я пришел к пакету django-cors-headers, но не могу заставить его работать.

Я посылаю axios запрос форме моего vue фронтенда:

axios.get('data/')
    .then(res => { console.log(res) })

но выдает ошибку 200 network error:

Access to XMLHttpRequest at 'http://localhost:8000/data/' from origin 'http://localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

GET http://localhost:8000/data/ net::ERR_FAILED 200

AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
code
: 
"ERR_NETWORK"
config
: 
{transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
message
: 
"Network Error"
name
: 
"AxiosError"
request
: 
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: true, upload: XMLHttpRequestUpload, …}
stack
: 
"AxiosError: Network Error\n

Django backend

Я перенаправляю входящий запрос в myProject/urls.py:

from django.urls import path, include


urlpatterns = [
    path('', include('myApp.urls')),
]

к myApp/urls.py:

from django.urls import path
from . import views


urlpatterns = [
    path('data/', views.getData)
]

который вызывает myApp/views.py:

from rest_framework.response import Response
from rest_framework.decorators import api_view
from base.models import Item
from .serializers import ItemSerializer


@api_view(['GET'])
def getData(request):
    items = Item.objects.all()
    serializer = ItemSerializer(items, many=True)
    return Response(serializer.data)

с base/models.py:

from django.db import models


class Item(models.Model):
    name = models.CharField(max_length=200)
    created = models.DateTimeField(auto_now_add=True)

и myApp/serializers.py:

from rest_framework import serializers
from base.models import Item


class ItemSerializer(serializers.ModelSerializer):
    class Meta:
        model = Item
        fields = '__all__'

Я установил пакет django-cors-headers и настроил его в myProject/settings.py:

INSTALLED_APPS = [
    'corsheaders',
    ...
]

MIDDLEWARE = [
    "corsheaders.middleware.CorsMiddleware",
]

с любым из них: 

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

или

CORS_ALLOW_ALL_ORIGINS = True

но ни один из них не работает. Я пробовал читать док-ты по пакету , но не могу найти ошибку.

выбрасывает ошибку 200 сетевой ошибки

Не существует такого понятия, как "сетевая ошибка 200": если вы получили код состояния 200, то проблем с сетью не было, поскольку браузер получил ответ от сервера. Вместо этого происходит то, что проверка CORS по какой-то причине не прошла; в результате браузер отказал вашему клиенту в доступе к ответу и выдал ошибку CORS.

Доступ к XMLHttpRequest по адресу 'http://localhost:8000/data/' от источника 'http://localhost:3000' был заблокирован политикой CORS: Значение заголовка 'Access-Control-Allow-Origin' в ответе не должно быть подстановочным символом '*', если режим мандатов запроса - 'include'. Режим полномочий запросов, инициированных XMLHttpRequest, контролируется атрибутом withCredentials.

.

Если вы получаете такое сообщение об ошибке, то это потому, что

  • ваш клиентский код отправляет авторизованный запрос, но
  • конфигурация CORS вашего сервера не разрешает такие запросы.

В вашем вопросе это не показано, но я подозреваю, что вы настроили свой клиент Axios на то, чтобы всегда отправлять запросы с учетными данными. Однако, установка CORS_ALLOW_ALL_ORIGINS в конфигурации CORS без установки CORS_ALLOW_CREDENTIALS results в следующем заголовке ответа,

Access-Control-Allow-Origin: *

и подстановочный знак несовместим с авторизованными запросами. Если вы хотите разрешить авторизованные запросы, вам необходимо также установить следующее в конфигурации CORS:

CORS_ALLOW_CREDENTIALS = True

В противном случае, проинструктируйте ваш клиент Axios не отправлять запросы, подтвержденные полномочиями.

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