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

Javascriptnode.jsFetch ApiRequest HeadersIsomorphic Fetch-Api

Javascript Problem Overview


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?

Javascript Solutions


Solution 1 - Javascript

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);
}

Solution 2 - Javascript

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser1526912View Question on Stackoverflow
Solution 1 - JavascriptRTSView Answer on Stackoverflow
Solution 2 - Javascriptuser1526912View Answer on Stackoverflow