reactjs - 使用模式为 : 'no-cors' , 的 fetch API 无法设置请求 header

Question

我正在尝试访问服务端点，该服务是登录服务我使用基本身份验证类型，代码处于 react 状态并使用获取库，但是即使我在请求中设置 header 字段，我也无法在网络选项卡中看到请求中相应 header 的值？

以下是代码:

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

您的 header 均未列入 CORS 安全列表，因此无法将它们附加到请求中。

说明:

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

2. 附加 name/value (名称/值)对到 Headers 对象( header )，浏览器必须运行以下步骤:

   1. Normalize值。

   2. 如果名称不是 name或值不是 value ，然后抛出 TypeError。

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

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

   5. 否则，如果防护是“request-no-cors”并且名称/值不是CORS安全列表请求 header ，则返回。 ←您的场景

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

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

3. CORS 安全列表请求 header (不区分大小写):
   • 接受
   • 接受语言
   • 内容语言
   • Content-Type，但前提是该值为以下之一:
     • application/x-www-form-urlencoded
     • 多部分/表单数据
     • 文本/纯文本

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