axios返回Request头域 X-Requested-With is not allowed by Access-Control-Allow-Headers答案

【问题标题】：Axios returns Request header field X-Requested-With is not allowed by Access-Control-Allow-Headersaxios返回Request头域 X-Requested-With is not allowed by Access-Control-Allow-Headers
【发布时间】：2019-09-10 09:54:42
【问题描述】：

我有一个 Laravel 应用程序，我在 VueJS 组件中使用 axios 在单击按钮时将 GET 请求发送到外部公共 API，但它会引发以下错误：

[Error] Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers.
[Error] XMLHttpRequest cannot load http://api.icndb.com/jokes/random due to access control checks.
[Error] Failed to load resource: Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers. (random, line 0)

这是我失败的尝试：

const url = "http://api.icndb.com/jokes/random";
const response = await axios.get(url);

我只是应该收到一些 Chuck Norris 的笑话来打印在控制台上......

PS：我已经看到了一些关于 CORS 的事实，但我没有从中得到任何东西，所以我在这里。

【问题讨论】：

axios 默认不设置该标头。然而，Laravel 在某处确实有 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; 这条线。你应该删除它。这通常是不好的做法
好的，我马上去找！但是......为什么这是一个不好的做法，为什么 Laravel 使用它？
那么故事是这样的：(1) 该标头由 jQuery.ajax 发送 (2) Laravel 设置它，因为服务器端遗留代码使用 Request::isAjax 很多，这依赖于现有的标头。这是不好的做法，因为 (1) XMLHttpRequest 不是我们可能用来执行 ajax 的唯一请求，axios 可能暂时环绕 XMLHttpRequest 但还有 fetch (2) 服务器不应该关心请求是否是以 AJAX 或其他方式传入。
你的 API 是在 laravel 中创建的吗？如果您在 laravel 中创建 api，则需要为它创建一个跨中间件。
我还没有创建 API：它是单击按钮时调用的函数。

标签： laravel vue.js axios

【解决方案1】：

Laravel 使用标头来确定请求是 XHR 还是正常请求。

在 Laravel 的源代码中可以看到 Request::ajax() 方法，它调用了 Symfony 的 isXmlHttpRequest() 方法。

唯一的问题是 CORS 并不喜欢这样的标头。

如果要删除它，请在resources/js 中检查bootstrap.js 并重新编译您的资产。

另一种解决方案是在调用之前删除标题：

delete axios.defaults.headers.common['X-Requested-With'];

【讨论】：

刚做了没有成功。并且第一个错误也改变了（其他没有改变）：请求头字段 X-CSRF-TOKEN is not allowed by Access-Control-Allow-Headers.
很好，这意味着它确实有效，但是您还必须删除 X-CSRF-TOKEN 标头。所以基本相同：delete axios.defaults.headers.common['X-CSRF-TOKEN'];。另外，如果我没记错的话，您可以使用如下参数转换请求：transformRequest(data, headers) { delete axios.defaults.headers.common['X-CSRF-TOKEN']; delete axios.defaults.headers.common['X-Requested-With']; return data; }
成功了！你让我很开心 :D 这是第一次遇到这个问题，排除故障似乎非常耗时。非常感谢！我会将您的回答标记为有帮助！