CODEWITHSUNDEEP
reactjsreact-nativefetch-api
sumit bhanwala
sumit bhanwala

Reputation: 351

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

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 Popup where its asking me for username and password

Request and response calls from the network tabs Request and response calls from the network tabs

Upvotes: 24

Views: 37470

Answers (1)

Dzmitry Bachko
Dzmitry Bachko

Reputation: 531

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

Upvotes: 30

Related Questions