fetch() 不发送标题?

新手上路,请多包涵

我从浏览器发送这样的 POST 请求:

 fetch(serverEndpoint, {
    method: 'POST',
    mode: 'no-cors', // this is to prevent browser from sending 'OPTIONS' method request first
    redirect: 'follow',
    headers: new Headers({
            'Content-Type': 'text/plain',
            'X-My-Custom-Header': 'value-v',
            'Authorization': 'Bearer ' + token,
    }),
    body: companyName
})

当请求到达我的后端时,它不包含 X-My-Custom-Header 也不包含 --- Authorization 标头。

我的后端是用于 Firebase 的 Google Cloud 函数(基本上只是 Node.js 端点),如下所示:

 exports.createCompany = functions.https.onRequest((req, res) => {
    let headers = ['Headers: ']
    for (let header in req.headers) {
        headers.push(`${header} : ${req.headers[header]}`)
    }
    console.log(headers)
    ...
}

该 Google Cloud for Firebase 函数的控制台日志不包含任何 X-My-Custom-HeaderAuthorization 标头。

怎么了?


编辑 1

因此,在 Chrome 中使用开发工具 a 检查既没有 X-My-Custom-Header 也没有 Authorization 标头是从浏览器发送的……现在的问题是:为什么?我如何解决它?


编辑 2

有关我的应用程序的更多信息:它是 React 应用程序。我禁用了服务人员。我尝试创建 Request 并使用 req.headers.append() 专门添加标头。标题仍然不会发送。

原文由 Rasto 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 590
2 个回答

同源策略 限制网页可以发送到来自另一个源的资源的请求的种类。

no-cors 模式下,浏览器仅限于发送“简单”请求——那些仅具有 安全列表方法安全列表标头 的请求。

To send a cross-origin request with headers like Authorization and X-My-Custom-Header , you have to drop the no-cors mode and support preflight requests ( OPTIONS )。

“简单”和“非简单”请求之间的区别是出于历史原因。网页总是可以通过各种方式(例如创建和提交表单)执行一些跨域请求,因此当 Web 浏览器引入一种发送跨域请求( 跨域资源共享 或 CORS)的原则性方法时,它是决定这样的“简单”请求可以免除预检 OPTIONS 检查。

原文由 Vasiliy Faronov 发布,翻译遵循 CC BY-SA 3.0 许可协议

首先:使用对象代替 new Headers(..)

 fetch('www.example.net', {
  method: 'POST',
  headers: {
    'Content-Type': 'text/plain',
    'X-My-Custom-Header': 'value-v',
    'Authorization': 'Bearer ' + token,
  }
});

其次:很高兴知道,标头由 fetch 小写!

第三no-cors 模式将标头的使用限制在这个白名单中:

  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type multipart/form-data 其价值是( application/x-www-form-urlencoded text/plain

这就是为什么只发送 Content-Type 标头而不发送 X-My-Custom-HeaderAuthorization 的原因。

原文由 Damien 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题