Как исправить ошибку при запросе к API с использованием axios?

Question

[SerJook]

Простите за нубский вопрос.
Изучаю Vue.js, смотрю в документации есть пример доступу к интересному API:
https://yesno.wtf/api
(магический шар).

Пишу в компоненте:

mounted() {
  axios
     .get('https://yesno.wtf/api')
     .then(response => (this.info = response.data.answer));
},

И что бы вы думали? Получаю ошибку:

app.js:279 OPTIONS https://yesno.wtf/api 404 (Not Found)
(index):1 Access to XMLHttpRequest at 'https://yesno.wtf/api' from origin 'localhost' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Почему в доках это написано, но оно не работает? Хнык-хнык.
Как это исправить?

Comments

[SagePtr]

Запрещены кроссдоменные запросы к данной странице? Это нормально, большинство страниц нельзя кроссдоменно дёргать.

[hzzzzl]

да не, должно работать


SerJook попробуй без аксиоса,

mounted() {
  fetch('https://yesno.wtf/api')
     .then(resp => resp.json())
     .then(response => (this.info = response.data.answer));
},

[SerJook]

hzzzzl, да, c fetch работает. Но fetch это какая-то новая фича, не поддерживается старыми браузерами.
С axios никак не получится?

Answer 1

[grinat]

Хедеры аксиос отправляет, из за этого запрашивается дополнительно options, чтобы узнать можно ли отправлять запрос с такими заголовками. Убери их и наступит щастье

Comments

[SerJook]

а как убрать хедеры?

[grinat]

SerJook, по идее так axios.get('hui.com', {headers: {}}), правда если что-то задавалось через axios.defaults.headers., то маловероятно что это сработает скорее всего он все равно прибавит хедер. Можно axios сменить на fetch и тогда точно будет все ок.