Проблемы CORS после добавления поля headers в axios при выполнении GET-запроса

Я использую Django REST для моего API / Back end.

Вот мой код на python: 

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

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    #'corsheaders.middleware.CorsPostCsrfMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]





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

CORS_ORIGIN_WHITELIST = [
    "http://localhost:3000",
    "http://127.0.0.1:3000"
]

На моем фронт-энде React JS:

listItems = async () =>{
    let fetchedItems = await axios.get("http://localhost:8000/api/shipments/list/", {headers: {accessToken: this.props.token, "Access-Control-Allow-Headers" : '*'}});
}

Я не получал никаких ошибок CORS, когда у меня был listItems без части заголовков:

listItems = async () =>{
    let fetchedItems = await axios.get("http://localhost:8000/api/items/list/"});
}

Однако мне нужно передать accessToken в заголовке запроса.

Вот ошибка, которую я получаю:

Доступ к XMLHttpRequest по адресу 'http://localhost:8000/api/items/list/' из origin 'http://localhost:3000' был заблокирован политикой CORS: Поле заголовка запроса accesstoken не разрешено Access-Control-Allow-Headers в префлайт-ответе.

Какова причина возникновения таких проблем с CORS, какой лучший способ исправить это?

Значит, проблема может быть вызвана промежуточным ПО, которое вы прокомментировали. А в примере, который вы прислали, нет никаких признаков INSTALLED_APPS

INSTALLED_APPS должна быть такой


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

Если ваша единственная цель - тестирование (не в производстве), вы можете добавить CORS_ORIGIN_ALLOW_ALL = True в файл settings.py.

Для будущих читателей, чтобы решить проблемы CORS с Django / Django REST.

в вашем файле settings.py добавьте:

CORS_ALLOW_HEADERS = [
    "name of the thing you are passing in the header",
    "Access-Control-Allow-Headers",
    "name of the thing you are passing in the header (all lower cased)",
]

В моем случае проблему решило следующее:

CORS_ALLOW_HEADERS = [
    "accessToken",
    "Access-Control-Allow-Headers",
    "accesstoken",
]
Вернуться на верх