Using the Fetch API with mode: "no-cors", request headers with a given set

Question

I’m trying to get to the endpoint of the service, and the service is the login service. I use the authentication type as the main one, the code reacts and uses the extraction library, but even if I set the headers field in my request, I can’t see the values ​​of the corresponding headers in my request on a network tab?

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

---

Pop-up window asking for username and password

---

Request and response on network tabs

Answer 1

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

:

• no-cors guard request-no-cors

• / (/) (), :

  • .

  • , , TypeError.

  • guard "", TypeError.

  • , guard "", - , .

  • , "request-no-cors" / CORS-safelisted request-header, . & LARR;

  • , guard "", - , .

  • / .

• 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