使用带有模式的 fetch API：'no-cors'，无法设置请求标头

Posted 2023-02-27

【中文标题】使用带有模式的 fetch API：\'no-cors\'，无法设置请求标头

【英文标题】：Using fetch API with mode: 'no-cors', can’t set request headers使用带有模式的 fetch API：'no-cors'，无法设置请求标头

【发布时间】：2017-11-20 05:37:32

【问题描述】：

我正在尝试访问服务端点并且该服务是登录服务 我将身份验证类型用作基本类型，代码在响应中并使用 fetch 库，但是即使我在请求中设置了 headers 字段，我也无法在网络选项卡中的请求中看到相应标头的值？

以下是代码：

var obj = 
  method: 'GET' ,
  mode : 'no-cors',
  headers: 
      'Access-Control-Request-Headers': 'Authorization',
      'Authorization': 'Basic amFzcGVyYWRtaW46amFzcGVyYWRtaW4=',
      'Content-Type': 'application/json',
      'Origin': ''
  ,
  credentials: 'include'
;
fetch('http://myreport:8082/jasperserver/rest/login/', obj ).then(…

---

弹出窗口询问我用户名和密码

---

从网络标签请求和响应呼叫

【问题讨论】：

这似乎是一个跨域请求，为什么您将模式设置为 'no-cors'？

【参考方案1】：

您的标头都不是CORS-safelisted，因此它们不能附加到请求中。

解释：

no-cors 请求模式将标头对象的 guard 属性设置为 request-no-cors

要将 name/value（名称/值）对附加到 Headers 对象（标头），浏览器必须运行以下步骤：

Normalize 值。

如果 name 不是 name 或 value 不是 value，则抛出 TypeError。

如果守卫是“不可变的”，则抛出 TypeError。

否则，如果guard是“request”并且name是一个禁止的头名称，则返回。

否则，如果守卫是"request-no-cors" 并且名称/值不是CORS-safelisted request-header，则返回。 ←你的场景

否则，如果guard是“response”并且name是一个禁止的响应头名称，则返回。

将名称/值附加到标题列表。

CORS-safelisted request-header（不区分大小写）： Accept Accept-Language Content-Language Content-Type，但前提是该值是以下之一： application/x-www-form-urlencoded multipart/form-data text/plain

您可以在此处了解有关 fetch 的 Headers class 规范的更多信息： https://fetch.spec.whatwg.org/#headers-class

【讨论】：

mode: 'no-cors' 基本上将请求标准化为“简单”请求，例如，服务器将收到 Content-Type: text/plain 而不是您在代码 sn-p 中的 application/json。我觉得这种行为很奇怪/很有趣，但就是这样。 mode:no-cors 也避免触发预检。