Access-Control-Allow-Headers 不允许请求 header 字段 X-CSRF-TOKEN

Question

我正在使用 vue 和 axios 向 embed.rock 发出获取请求。

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

当我使用 CDN 通过内联脚本获取 vue 和 axios 时，我的代码工作正常并且我得到了响应。

当我使用外部脚本引用已安装的 vue 和 axios 脚本时，代码不再运行并且出现以下错误：

Failed to load https://api.embed.rocks/api?url=https://www.youtube.com/watch?v=DJ6PD_jBtU0&t=4s: Request header field X-CSRF-TOKEN is not allowed by Access-Control-Allow-Headers in preflight response.

当我单击控制台中的错误时，它只会将我带到：

<!DOCTYPE html>

Answer 1

Laravel 正在设置全局配置以自动将 X-CSRF-TOKEN 包含在 bootstrap.js 文件中请求的 headers 中。

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');
}

因此，如果你想移除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'
    }
});

Answer 2

问题是默认情况下 CSRF Token 注册为 Axios 的通用 header 所以解决这个问题：

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- 通过 npm 安装 qs 模块 ..... 使用 link : 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));

Access-Control-Allow-Headers 不允许请求 header 字段 X-CSRF-TOKEN

Request header field X-CSRF-TOKEN is not allowed by Access-Control-Allow-Headers

embed

laravel

vue.js

axios