javascript - Axios 未在请求中发送自定义 header (可能是 CORS 问题)

标签 javascript vue.js cors http-headers axios

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

我是这样使用它的:

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

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

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 问题(响应 header 不包括 Access-Control-Allow-Headers 中的 Custom-Header),但我想在就此事联系 API 所有者之前先确认一下。

最佳答案

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

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

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

enter image description here

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

关于javascript - Axios 未在请求中发送自定义 header (可能是 CORS 问题),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50603715/

相关文章:

javascript - vue中使用ref修改元素样式在toggle路由中发送错误

javascript - 添加文档访问被拒绝

javascript - 如何更改 Flask 中的 CORS header ?

javascript - 为什么我会收到此 Angular-Mock 错误并且 Mocha 测试未运行

javascript - 将一些代码转换为 jQuery

javascript - 使用 window.location.hostname 时生成意外的 URL

vue.js - 如何将VueJS中的属性对象传递给组件来修改它?

reactjs - 无法使用 nginx 在 ReactJS 应用程序中使用 CORS

javascript - ES2015 类阻止设置原型(prototype)

javascript - php代码在文本框更改事件上显示null