отсутствует токен 'access-control-allow-origin' в заголовке CORS 'Access-Control-Allow-Headers' из канала предварительной проверки CORS

Question

Я пытаюсь подключить приложение React к серверу Django. Приложение React работает на http://127.0.0.1:3000/

В заголовках ответа установлено Access-Control-Allow-Origin: http://127.0.0.1:3000, но я все еще вижу ошибку.

В настоящее время я использую пакет Corsheaders от Django, как рекомендовано везде. Достойный пример рекомендации Как включить CORS в Django REST Framework .

Но в этот момент я также попробовал пользовательское промежуточное ПО.

В моем файле Django Settings.py содержится следующее

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

Django на 8000, React на 3000

CORS_ORIGIN_WHITELIST = [
    'http://127.0.0.1:3000',
    'http://localhost:3000',
    'http://127.0.0.1:8000',
    'http://localhost:8000',
]

Мой запрос на реагирование выглядит следующим образом. (Это работает, когда я запускаю его напрямую, а не через браузер)

const fetch = require('node-fetch')

const response = await fetch(
      url,
      {
        json: true,
        method: 'GET',
        headers: {
          'Access-Control-Allow-Origin': '*',
          Accept: '*/*',
          'Content-Type': 'application/json'
        }
      }
    )

Опять же, это так странно, что я делаю запрос из http://127.0.0.1:3000, а заголовки ответа имеют Access-Control-Allow-Origin: http://127.0.0.1:3000, но по какой-то причине он все еще не работает.

О, сообщение об ошибке в консоли браузера:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/query/?date=2019-10-25. (Reason: missing token ‘access-control-allow-origin’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/query/?date=2019-10-25. (Reason: CORS request did not succeed).

Любая помощь будет потрясающей! Спасибо

Answer 1

@ sideshowbarker понял это. Это потому, что я отправлял заголовки в своем запросе.

Изменение

const fetch = require('node-fetch')

const response = await fetch(
      url,
      {
        json: true,
        method: 'GET',
        headers: {
          'Access-Control-Allow-Origin': '*',
          Accept: '*/*',
          'Content-Type': 'application/json'
        }
      }
    )

на

const fetch = require('node-fetch')

const response = await fetch(
      url,
      {
        json: true,
        method: 'GET'
      }
    )

Немедленно исправлена ​​проблема! Спасибо!