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

Question

我正在尝试访问服务端点并且该服务是登录服务 我将身份验证类型用作基本类型，代码在响应中并使用 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(…

---

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

---

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

Answer 1

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

解释：

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

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

   1. Normalize 值。

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

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

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

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

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

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

3. 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