I am using npm 'isomorphic-fetch' to send requests. The problem I am experiencing is I am unable to set the content-type of the request header.
I set a content type of application/json , however the request header are being set to text/plain.
import 'isomorphic-fetch'; sendRequest(url, method, body) { const options = { method: method, headers:{'content-type': 'application/json'}, mode: 'no-cors' }; options.body = JSON.stringify(body); return fetch(url, options); }
When I examine the request in my browser the content type is o :
content-type:text/plain;charset=UTF-8
Can anyone explain why I am unable to set this property?
Fetch Wrapper with Set Authorization Header The authHeader() function is used to automatically add a JWT auth token to the HTTP Authorization header of the request if the user is logged in and the request is to the application API url ( process. env. REACT_APP_API_URL ).
The Headers interface of the Fetch API allows you to perform various actions on HTTP request and response headers. These actions include retrieving, setting, adding to, and removing headers from the list of the request's headers.
You need to create a fetch headers object.
sendRequest(url, method, body) { const options = { method: method, headers: new Headers({'content-type': 'application/json'}), mode: 'no-cors' }; options.body = JSON.stringify(body); return fetch(url, options); }
I found the answer after reading the following article:
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Headers
GuardSince headers can be sent in requests and received in responses, and have various limitations about what information can and should be mutable, headers objects have a guard property. This is not exposed to the Web, but it affects which mutation operations are allowed on the headers object.
Possible guard values are:
none
: default.request
: guard for a headers object obtained from a request (Request.headers
).request-no-cors
: guard for a headers object obtained from a request created withRequest.mode
no-cors
.response
: guard for a Headers obtained from a response (Response.headers
).immutable
: Mostly used for ServiceWorkers; renders a headers object read-only.Note: You may not append or set a
request
guarded Headers’Content-Length
header. Similarly, insertingSet-Cookie
into a response header is not allowed: ServiceWorkers are not allowed to set cookies via synthesized responses.
When the options mode property is set to no-cors the request header values are immutable.
Instead I set the mode property to cors.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With