Using fetch API with mode: 'no-cors', can’t set request headers

Question

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

this seems to be a cross origin request why have you set mode to 'no-cors'? — WitVault
– WitVault, Commented Jun 17, 2017 at 15:49
try to remove mode: no-cors and use npmjs.com/package/cors or something similar for your backend platform — KEMBL
– KEMBL, Commented Jun 22, 2022 at 18:24

Dzmitry Bachko · Accepted Answer · 2018-10-25 18:49:50Z

31

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

Explanation:

no-cors request mode sets guard property for a headers object to request-no-cors
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.
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

edited Oct 25, 2018 at 18:49

answered Jul 8, 2017 at 15:02

Dzmitry Bachko

5411 gold badge4 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Borek Bernard Over a year ago

mode: 'no-cors' basically normalizes the request to be a "simple" one, for example, the server will receive Content-Type: text/plain instead of application/json that you have in your code snippet. I find this behavior quite strange/interesting but that's the way it is. mode:no-cors also avoids triggering preflight.

Collectives™ on Stack Overflow

Using fetch API with mode: 'no-cors', can’t set request headers

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related