Laravel Axios返回访问控制允许标头不允许的请求标头字段X-Requested-With

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

[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相关的事实，但我没有从中得到任何东西，所以我在这里。

Laravel使用一个头来确定一个请求是XHR还是一个普通请求

在Laravel的源代码中可以看到该方法，它从Symfony调用该方法

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

如果要删除它，请在

resources/js

中选中

bootstrap.js

，然后再次编译您的资产

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

---

删除axios.defaults.headers.common['X-request-With']
默认情况下，axios不会设置该标头。但是，Laravel确实有一行
window.axios.defaults.headers.common['X-request-With']='XMLHttpRequest'某处。你应该把它去掉。这通常是不好的做法，好吧，我现在就去找！但是为什么这是一种不好的做法，为什么Laravel使用它呢？故事是这样的：（1）该头是由jQuery.ajax发送的（2）Laravel设置它，因为服务器端遗留代码使用了大量依赖于现有头的
Request:：isAjax
。这是一种不好的做法，因为（1）
XMLHttpRequest
不是我们可以用来做ajax的唯一请求，axios现在可能会绕过
XMLHttpRequest
，但是还有
fetch
（2）服务器不应该关心请求是作为ajax还是来自其他地方。您是在laravel中创建API的吗？如果你在laravel中创建api，那么你需要为它创建一个跨中间件。我还没有创建api：它是一个在单击按钮时调用的函数。只是这样做了，但没有成功。第一个错误也改变了（其他错误没有改变）：Access-Control-Allow-Headers不允许请求头字段X-CSRF-TOKEN。太好了，这意味着它确实有效，但您也必须删除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-request-With']；return data；}
！这是我第一次面对这个问题，解决这个问题似乎非常耗时。非常感谢你！我会把你的回答记为有用！