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 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>

Answer 1

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

Answer 2

问题在于，默认情况下，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-通过npm .....使用Thie链接安装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));

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

2 个答案: