Axios没有在请求中发送自定义标头(可能是CORS问题)

Question

我遇到了一个问题，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问题(响应头不包括访问控制允许头中的自定义标头)，但在与API所有者联系之前，我想确定一下。

Answer 1

好的。所以你的案子是飞行前的请求。当客户端试图发送自定义标头时，服务器需要验证它是否接受该标头。

因此，在这种情况下，一个飞行前选项请求与头部访问-控制-请求-头发送。如果服务器响应，它将接受自定义标头。那么实际的请求就会被发送。

在您的情况下，服务器响应头-访问-控制-允许-头不包含您的自定义标头名称。这就是它失败的原因。

​

​

注意:实际的POST请求不包括访问控制-请求-*头；它们仅用于选项request.Read - cors -选项呼叫。

Answer 2

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

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

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