Поле заголовка запроса X-CSRF-TOKEN не разрешено Access-Control-Allow-Headers - PullRequest
Новая
       3

Поле заголовка запроса X-CSRF-TOKEN не разрешено Access-Control-Allow-Headers

0 голосов
/ 05 июля 2018

Я делаю запрос get на embed.rock, используя vue и axios. 

axios({
  method: 'get',
  url: 'https://api.embed.rocks/api?url=' + this.url,
  headers: {
      'x-api-key': 'my-key'
  }
})

Когда я использую CDN для получения vue и axios с помощью встроенного скрипта, мой код работает нормально, и я получаю ответ.

Когда я ссылаюсь на установленные скрипты vue и axios с помощью внешнего скрипта, код больше не запускается, и я получаю следующую ошибку:

Не удалось загрузить https://api.embed.rocks/api?url=https://www.youtube.com/watch?v=DJ6PD_jBtU0&t=4s: Поле заголовка запроса X-CSRF-TOKEN не разрешено Access-Control-Allow-Headers в ответе перед полетом.

Когда я нажимаю на ошибку в консоли, она просто приводит меня к: 

<!DOCTYPE html>

Ответы [ 2 ]

0 голосов
/ 26 августа 2018

проблема в том, что по умолчанию токен CSRF регистрируется как общий заголовок с Axios, поэтому чтобы решить эту проблему:

1 - заменить эти строки в bootstrap.js 

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf- 
token');
}

по этой строке 

window.axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

2 - установить модуль qs по npm ..... используя эту ссылку: https://www.npmjs.com/package/qs

3 - определить константу qs, как показано ниже: const qs = require ('qs');

4 - использовать axios по умолчанию следующим образом: 

axios.post('your link here ',qs.stringify({
  'a1': 'b1',
  'a2 ':'b2'
}))
.then(response => {alert('ok');})
.catch(error => alert(error));
0 голосов
/ 05 июля 2018

Laravel устанавливает глобальную конфигурацию для автоматического включения X-CSRF-TOKEN в заголовки запроса в файле bootstrap.js. 

let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

Поэтому, если вы хотите удалить токен, вы можете достичь его следующим образом: 

var instance = axios.create();
delete instance.defaults.headers.common['X-CSRF-TOKEN'];

instance({
    method: 'get',
    url: 'https://api.embed.rocks/api?url=' + this.url,
    headers: {
        'x-api-key': 'my-key'
    }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...