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

Nin*_*and 5 javascript http-headers cors vue.js axios

我遇到了axios似乎不随我的请求发送自定义标头的问题。

我正在这样使用它:

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

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

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
Run Code Online (Sandbox Code Playgroud)

我怀疑这可能是CORS问题(响应标头不包括Access-Control-Allow-Headers中的Custom-Header),但是在与API所有者联系之前,我想确定一下。

Ron*_*der 7

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

因此,在这种情况下,预检选项请求与标头Access-Control-Request-Headers一起发送。如果服务器响应,它将接受自定义标头。那么实际的请求将被发送。

在您的情况下,服务器响应标头-access-control-allow-headers不包含您的自定义标头名称。那就是为什么它失败了。

在此处输入图片说明

注意:实际的POST请求不包含Access-Control-Request- *标头;只有OPTIONS请求才需要它们。请阅读本文以获取更多说明-cors-options调用