Ошибка CORS при вызове acios.get

Я использую axios, чтобы сделать вызов axios.get в моем файле action.js. В моем компоненте это действие выполняется при отправке формы.

Я получаю статус 200 в консоли, но не получаю ответа. Я получаю следующую ошибку:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http:\\\\localhost:3000' is therefore not allowed access.

Кто-нибудь тоже сталкивался с такой ошибкой? Не могли бы вы рассказать о том, как решить эту проблему.

Ответ 1

Проблема не в аксиомах. Проблема с сервером. Когда вы обслуживаете данные, перед отправкой необходимо добавить следующие заголовки.

Access-Control-Allow-Origin должен быть установлен на *

Access-Control-Allow-Headers должен быть установлен на Origin, X-Requested-With, Content-Type, Accept

Ответ 2

Первая путаница, с которой я столкнулся с этой проблемой, заключалась в понимании того, что означает предполетный запрос. Поэтому я начну оттуда.

Браузеры отправляют предполетные запросы всякий раз, когда запрос не отвечает этим критериям:

HTTP-методы соответствуют одному из (с учетом регистра):
- GET
- POST
- ГОЛОВКА
Заголовки HTTP-заголовков (без учета регистра):
- Принять
- Принять язык
- Язык контента
- Last-Event-ID
- Content-Type, но только если значение является одним из следующих:
  - применение/х-WWW-форм-urlencoded
  - многочастному/форм-данных
  - Текст/равнина

Запросы предварительной проверки выполняются с помощью метода OPTIONS, который включает в себя три дополнительных заголовка, которые ваш сервер не может ожидать, если он не настроен для CORS. Это:

Access-Control-Allow-Headers
Access-Control-Allow-Origin
Access-Control-Allow-метода

Если сервер не настроен для CORS, он просто отвечает пустым заголовком, имеющим код состояния HTTP 200. После того, как вы настроили сервер для CORS, вы должны включить заголовки, перечисленные выше, в качестве заголовков, поддерживаемых CORS.

Это должно устранить ошибку и позволить вам общаться с сервером.

Примечание.. Хотя ваш сервер может обрабатывать созданный вами пользовательский заголовок (в моем случае Authorization для проверки подлинности JWT), скорее всего, он не будет настроен для запроса CORS. Если у вас есть доступ к вашему серверу, просто узнайте, как настроить CORS для этого сервера.

Для получения дополнительной информации о CORS. См. https://www.html5rocks.com/en/tutorials/cors/

Ответ 3

Это сработало для меня:

axios.create({
    baseURL: "http://localhost:8088"
  }).get('/myapp/user/list')
    .then(function(response) {
      callback && callback(response);
      debugger;
    })