Axios заблокирован политикой CORS с Django REST Framework

Я пытаюсь делать запросы к моему API (Django REST Framework) с помощью Axios, но получаю следующую ошибку:

Access to XMLHttpRequest at 'http://trvl.hopto.org:8000/api/airports/MSP/routes' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Даже сложно, когда вы используете cUrl для проверки:

curl -I -X GET   -H "Origin: http://localhost:3000"   -H 'Access-Control-Request-Method: GET'   http://trvl.hopto.org:8000/api/airports/MSP/routes 2>&1 | grep 'Access-Control-Allow-Origin'
Response: Access-Control-Allow-Origin: *

Full response from cUrl Options:
OPTIONS request: curl -I -X OPTIONS   -H "Origin: http://localhost:3000"   -H 'Access-Control-Request-Method: GET'   http://trvl.hopto.org:8000/api/airports/MSP/routes
HTTP/1.1 200 OK
Date: Wed, 27 Mar 2019 10:58:01 GMT
Server: WSGIServer/0.2 CPython/3.6.8
Content-Type: text/html; charset=utf-8
Content-Length: 0
Vary: Origin
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: accept, accept-encoding, authorization, content-type, dnt, origin, user-agent, x-csrftoken, x-requested-with
Access-Control-Allow-Methods: DELETE, GET, OPTIONS, PATCH, POST, PUT
Access-Control-Max-Age: 86400

При использовании Axios:

let url = 'http://A.hopto.org:8000/api/airports/MSP/routes';

axios.get(url)
      .catch((err) => {
        console.error(err);
      })
      .then((response, ) => {
        console.info(response);
      });


Response:
Access to XMLHttpRequest at 'http://API.hopto.org:8000/api/airports/MSP/routes' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Проблема в том, что в API включен CORS, но я не могу заставить его работать с Axios и React в своем веб-приложении.

ОБНОВИТЬ:

Here is my Django settings.py I'm using the https://github.com/ottoyiu/django-cors-headers module.

**settings.py**

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = ['*']

# Application definition

INSTALLED_APPS = [
    'corsheaders',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'trvl',
    'rest_framework',
    'coreapi',
    'django_filters',
]

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

CORS_ORIGIN_ALLOW_ALL = True

Вы проверили, чтобы убедиться, что django имеет URL-адрес вашего запроса в разрешенных источниках?

wnamen 26.03.2019 23:00

Двойная проверка: установлен ли заголовок ответа для GET? Ответ Curl для запроса OPTIONS

Geert-Jan 26.03.2019 23:14

Исходная страница https или http? Ваш код отлично работает с HTTP-страницы, но не работает с HTTPS.

Jaromanda X 26.03.2019 23:33

Я использую подстановочный знак *, чтобы разрешить все источники, и GET также возвращает заголовок Allow-Origins *, исходная страница также является HTTP

murthaA 27.03.2019 12:05

Я нашел ответ, который сработал: stackoverflow.com/questions/55108410/…

murthaA 27.03.2019 12:32
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
5
6 163
3

Ответы 3

В вашем внутреннем коде вам нужно добавить добавить http://localhost:3000 как часть заголовка ответа для поля Access-Control-Allow-Origin

Также убедитесь, что в вашем ответе есть это поле Access-Control-Allow-Methods, включая GET

Вы упомянули, что в вашем коде внутреннего API включен CORS. Если вышеперечисленное не работает, можете ли вы обновить свой пост, чтобы указать, как вы его настроили?

Я использую подстановочный знак *, чтобы разрешить все источники, и я попытаюсь добавить GET, чтобы разрешить методы, я только что обновил сообщение с помощью своего Django settings.py и добавил весь ответ OPTIONS из cURL

murthaA 27.03.2019 11:58

Это потому, что вы забыли '/' в конце своего URL.

let url = 'http://A.hopto.org:8000/api/airports/MSP/routes/';

Мне нужно было добавить префикс http:// к моему URL localhost:8000

Другие вопросы по теме