Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set the content-type of request header when using Fetch APi

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?

like image 303
user1526912 Avatar asked Jul 02 '16 03:07

user1526912


People also ask

How do I change the authorization header in Fetch?

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 ).

What are headers in Fetch?

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.


2 Answers

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); } 
like image 146
RTS Avatar answered Sep 29 '22 12:09

RTS


I found the answer after reading the following article:

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Headers

Guard

Since 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 with Request.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, inserting Set-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.

like image 30
user1526912 Avatar answered Sep 29 '22 12:09

user1526912