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问题（响应标头在Access-Control-Allow-Headers中不包含自定义标头），但我想在联系API所有者之前确定此事。

Answer 1

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

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

在您的案例服务器响应标头中 - access-control-allow-headers不包含您的自定义标头名称。 这就是为什么它失败了。

注意：实际的POST请求不包括Access-Control-Request- *标头;只有OPTIONS请求才需要它们。阅读本文以获得更多解释 - cors - options call

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请求将开始正常工作。