Axios请求未携带自定义Header，疑为CORS问题

你的怀疑完全正确——这几乎肯定是CORS预检请求未通过导致的浏览器拦截行为，和Axios本身的代码无关。

为什么会出现这个情况？ #

当你在浏览器中发送包含自定义HTTP Header（比如你的Custom-Header）的跨域请求时，浏览器会自动先发送一个OPTIONS类型的预检请求，用来询问服务器：「我接下来要发的请求会带这些Header，你允许吗？」

从你提供的请求头信息里，能看到关键的一行：

Access-Control-Request-Headers: custom-header

这就是浏览器在预检请求里告诉服务器「我要带这个自定义Header」的信号。如果服务器的响应头里没有包含Access-Control-Allow-Headers: Custom-Header（CORS规范里Header名不区分大小写，但建议和请求里的写法保持一致），浏览器就会判定这个请求不被允许，直接拦截后续的实际GET请求，自然不会把Custom-Header发送到服务器。

如何进一步确认？ #

• 检查预检请求的响应：打开浏览器开发者工具的「网络」面板，找到那个OPTIONS请求，查看它的响应头里有没有Access-Control-Allow-Headers，并且是否包含你的Custom-Header。如果没有，那就是服务器配置的问题。
• 用curl绕开浏览器测试：在终端里运行以下命令，直接向服务器发送带自定义Header的请求：

  curl -H "Custom-Header: my-custom-value" -X GET https://www.my-url.com
  

  如果服务器能正确接收到这个Header，就彻底证明是浏览器的CORS限制导致的，而非Axios代码的问题。
• 确认Axios代码正确性：你的Axios写法完全没问题，headers配置的格式是正确的，Axios会正确处理这个Header设置。

解决方案 #

你需要联系API维护方，让他们在服务器的CORS配置中：

1. 将Custom-Header添加到Access-Control-Allow-Headers的允许列表中
2. 确保Access-Control-Allow-Origin设置为允许你的前端域名（不建议用通配符*，因为带自定义Header的请求无法使用通配符）

内容的提问来源于stack exchange，提问作者Ninethousand