Почему axios вызывает ошибку Access-Control-Allow-Origin - PullRequest
Новая
       24

Почему axios вызывает ошибку Access-Control-Allow-Origin

0 голосов
/ 29 мая 2018

У меня довольно простой код axios: 

axios.get(GEO_IP)
.then(res => res)
.catch(err => err);

Кроме того, я установил следующие значения по умолчанию: 

axios.defaults.headers["content-type"] = "application/json";
axios.defaults.headers.common.authorization = `Bearer ${token}`;

токен авторизации не нужен для этого общедоступного API.Когда я пытаюсь запустить запрос с помощью axios.get, я вижу следующую ошибку в консоли:

Не удалось загрузить https://ipfind.co/me?auth=8964b0f3-4da1-46eb-bcb4-07a9614a6946: Ответ на предпечатный запрос не проходит проверку контроля доступа: Нет 'Заголовок Access-Control-Allow-Origin 'присутствует в запрашиваемом ресурсе.Origin 'http://localhost:3000', следовательно, не разрешен доступ.

Когда я переписываю axios с использованием собственного XMLHttpRequest: 

new Promise((resolve, reject) => {
const http = new XMLHttpRequest();
http.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    // result
  }
};
http.open("GET", GEO_IP, true);
http.send();
});`

Все работает без ошибок.Может кто-нибудь уточнить, почему запрос axios вызывает ошибку и как я могу ее исправить?

Ответы [ 2 ]

0 голосов
/ 29 мая 2018

Сообщение об ошибке гласит:

Ответ на запрос предполетной проверки

Это не имеет никакого отношения к axios.Вы пытаетесь отправить различных запросов.Когда вы используете axios, вы настраиваете запрос таким образом, что требуется предварительная проверка. 

axios.defaults.headers["content-type"] = "application/json";
axios.defaults.headers.common.authorization = `Bearer ${token}`;

Любой из вышеперечисленных вызовет предварительную проверку.

Версия XMLHttpRequest (которая не устанавливает заголовки HTTP) не требует предварительной проверки, поэтому сервер, не поддерживающий предварительную проверку, не является проблемой.

0 голосов
/ 29 мая 2018

Это означает, что в то время как ваш сервер отправляет правильные заголовки CORS для запроса GET, это не для запроса OPTIONS, который отправляется axios как часть предварительного запроса.

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

См. MDN для более подробной информации об этом .

...