Access-Control-Allow-Headers 不允许请求头字段 X-CSRF-TOKEN答案

【问题标题】：Request header field X-CSRF-TOKEN is not allowed by Access-Control-Allow-HeadersAccess-Control-Allow-Headers 不允许请求头字段 X-CSRF-TOKEN
【发布时间】：2018-12-14 09:28:21
【问题描述】：

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

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

当我使用 CDN 通过内联脚本获取 vue 和 axios 时，我的代码运行良好，并且得到了回复。

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

无法加载https://api.embed.rocks/api?url=https://www.youtube.com/watch?v=DJ6PD_jBtU0&t=4s：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 X-CSRF-TOKEN。

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

<!DOCTYPE html>

【问题讨论】：

标签： laravel vue.js embed axios

【解决方案1】：

Laravel 正在设置一个全局配置，以在您的 bootstrap.js 文件的请求标头中自动包含 X-CSRF-TOKEN。

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

【讨论】：

感谢您的回答。我已经对我的代码进行了更改，但仍然得到完全相同的东西。
@user3325126 你确定吗？我已经对其进行了测试，它似乎正在抛出X-Requested-With。您也可以从标题中删除它。
删除两者都做到了。谢谢！

【解决方案2】：

问题是默认情况下 CSRF Token 被注册为 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- 通过 npm 安装 qs 模块 ..... 使用链接：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));

【讨论】：

感谢您的解决方案！