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

IT技术 reactjs react-native fetch-api
2021-04-12 02:34:04

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

弹出窗口要求我输入用户名和密码 弹出窗口要求我输入用户名和密码

来自网络选项卡的请求和响应调用 来自网络选项卡的请求和响应调用

1个回答

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

解释：

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

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

    1. 标准化值。

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

    3. 如果守卫是“不可变的”，则抛出一个类型错误。

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

    5. 否则，如果 guard is"request-no-cors"并且 name/value 不是 a 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

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

mode: 'no-cors'基本上将请求规范化为“简单”请求，例如，服务器将接收Content-Type: text/plain而不是application/json您在代码片段中收到的请求。我发现这种行为很奇怪/有趣，但事实就是这样。mode:no-cors 也避免触发预检。
2021-06-22 02:34:04
其它你可能感兴趣的问题
上一篇未捕获的类型错误：this.state.data.map 不是函数 下一篇如何在 React v16.6 的新 CONTEXT API 中获取多个静态上下文