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

reactjs react-native fetch-api

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

CodeHunter