Axios 未在请求中发送自定义标头（可能是 CORS 问题）答案

【问题标题】：Axios not sending custom headers in request (possible CORS issue)Axios 未在请求中发送自定义标头（可能是 CORS 问题）
【发布时间】：2018-11-09 06:02:34
【问题描述】：

我遇到了一个问题，axios 似乎没有随我的请求发送自定义标头。

我是这样使用的：

axios({
  method: 'get',
  url: 'www.my-url.com',
  headers: { 'Custom-Header': 'my-custom-value' }
})

但是，查看发送到服务器的实际请求，自定义标头似乎不在任何地方。

REQUEST HEADERS:
  Accept: */*
  Accept-Encoding: gzip, deflate, br
  Accept-Language: es-ES,es;q=0.9
  Access-Control-Request-Headers: custom-header
  Access-Control-Request-Method: GET
  Connection: keep-alive
  Host: my-url.com

我怀疑这可能是 CORS 问题（响应标头不包括 Access-Control-Allow-Headers 中的 Custom-Header），但我想在联系 API 所有者之前确认此事。

【问题讨论】：

您是否在控制台上打印出与 CORS 相关的错误消息？
浏览器是发出 GET 请求还是预检 OPTIONS 请求？
在发出预检请求时使用 Access-Control-Request-Headers 请求标头，以让服务器知道在发出实际请求时将使用哪些 HTTP 标头。为什么要发送自定义标头作为访问控制？
能否请您说明您的呼叫具体是什么，您发送的所有请求标头。
@RonnWilder — 嗯？ OP 正在尝试发送 Custom-Header 标头。为什么浏览器不会在发出 OP 试图发出的请求之前发出带有 Access-Control-Request-Headers: custom-header 标头的预检请求？

标签： javascript vue.js cors http-headers axios

【解决方案1】：

好的。所以你的情况是预检请求。当客户端尝试发送自定义标头时，服务器需要验证它是否接受该标头。

所以在这种情况下，预检选项请求会与标头 Access-Control-Request-Headers 一起发送。如果服务器响应它将接受自定义标头。然后将发送实际请求。

在您的情况下，服务器响应标头 - access-control-allow-headers 不包含您的自定义标头名称。这就是它失败的原因。

注意：实际的 POST 请求不包括 Access-Control-Request-* 标头；它们仅用于 OPTIONS 请求。阅读本文以获得更多解释 - cors - options call

【讨论】：

【解决方案2】：

您的 axios 请求是正确的。您需要在服务器端允许您的自定义标头。如果你在 php 中有你的 api，那么这段代码对你有用。

header("Access-Control-Allow-Origin: *");   
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, HEAD");
header("Access-Control-Allow-Headers: Content-Type, Custom-Header");

一旦您在服务器端允许自定义标头，您的 axios 请求将开始正常工作。

【讨论】：