laravel Access-Control-Allow-Headers 不允许请求头字段 X-CSRF-TOKEN
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51199077/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Request header field X-CSRF-TOKEN is not allowed by Access-Control-Allow-Headers
提问by user3325126
I'm making a get request to embed.rock using vue and axios.
我正在使用 vue 和 axios 向 embed.rock 发出 get 请求。
axios({
method: 'get',
url: 'https://api.embed.rocks/api?url=' + this.url,
headers: {
'x-api-key': 'my-key'
}
})
When I use a CDN to get vue and axios with an inline script my code works fine and I get a response back.
当我使用 CDN 通过内联脚本获取 vue 和 axios 时，我的代码运行良好，并且得到了回复。
When I reference the installed vue and axios scrpts with an external script the code no longer runs and I get the following error:
当我使用外部脚本引用已安装的 vue 和 axios scrpts 时，代码不再运行，并且出现以下错误：
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.
无法加载https://api.embed.rocks/api?url=https://www.youtube.com/watch?v=DJ6PD_jBtU0&t=4s：访问控制不允许请求标头字段 X-CSRF-TOKEN - 预检响应中的允许标题。
When I click on the error in the console it just brings me to:
当我单击控制台中的错误时，它只会将我带到：
<!DOCTYPE html>
回答by Chin Leung
Laravel is setting a global configuration to include automatically the X-CSRF-TOKENin the headers of the request in your bootstrap.jsfile.
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');
}
Therefore, if you want to remove the token, you can achieve it like this:
因此，如果要删除令牌，可以这样实现：
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'
}
});
回答by Taif Raoof
the problem is that by default the CSRF Token is register as a common header with Axios so to solve this issue :
问题是默认情况下，CSRF 令牌注册为 Axios 的公共标头，以便解决此问题：
1- replace these lines in bootstrap.js
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');
}
by this line
通过这条线
window.axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
2- install qs module by npm ..... using thie link : https://www.npmjs.com/package/qs
2-通过 npm 安装 qs 模块 ..... 使用链接：https://www.npmjs.com/package/qs
3- define const of qs like below : const qs = require('qs');
3- 像下面这样定义 qs 的常量：const qs = require('qs');
4- use axios by defult like this :
4- 像这样默认使用 axios ：
axios.post('your link here ',qs.stringify({
'a1': 'b1',
'a2 ':'b2'
}))
.then(response => {alert('ok');})
.catch(error => alert(error));
