在模式为"no-cors"的情况下使用提取API，无法设置请求标头 [英] Using fetch API with mode: 'no-cors', can’t set request 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(…

---

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

---

网络"标签中的请求和响应呼叫

解决方案

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

说明:

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

2. 要附加名称/值(名称/值)对与Headers对象(标头)配对，浏览器必须运行这些步骤:

   1. 标准化值.

   2. 如果名称不是名称，或者值不是值，然后引发TypeError.

   3. 如果后卫是不可变的"，则抛出TypeError.

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

   5. 否则，如果guard是"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

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

I am trying to hit a service end point and the service is a login service I am using the authentication type as basic ,The code is in react and using the fetch library however even if i set the headers field in my request I am unable to see the values of corresponding headers in my request in network tab?

Following is the code :

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(…

---

Popup where its asking me for username and password

---

Request and response calls from the network tabs

解决方案

None of your headers are CORS-safelisted, so they can not be attached to the request.

Explanation:

1. no-cors request mode sets guard property for a headers object to request-no-cors

2. To append a name/value (name/value) pair to a Headers object (headers), browser have to run these steps:

   1. Normalize value.

   2. If name is not a name or value is not a value, then throw a TypeError.

   3. If guard is "immutable", then throw a TypeError.

   4. Otherwise, if guard is "request" and name is a forbidden header name, return.

   5. Otherwise, if guard is "request-no-cors" and name/value is not a CORS-safelisted request-header, return. ← your scenario

   6. Otherwise, if guard is "response" and name is a forbidden response-header name, return.

   7. Append name/value to header list.

3. CORS-safelisted request-header (case-insensitive):
   • Accept
   • Accept-Language
   • Content-Language
   • Content-Type, but only if the value is one of:
     • application/x-www-form-urlencoded
     • multipart/form-data
     • text/plain

You can learn more about fetch's Headers class specs here: https://fetch.spec.whatwg.org/#headers-class

这篇关于在模式为"no-cors"的情况下使用提取API，无法设置请求标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！