typescript Cannot add headers to a fetch api using react-native

Question

I am using Fetch API from react-native and I am using typescript. My code looks like this:

let responseLogin = await fetch('http://url_example', {
        method: 'POST',
        headers: {'Content-Type':'application/json'},
        body: requestBody
    });

But I get the following error where the header is:

 Argument of type '{ method: string; headers: { 'Content-Type': string; }; body: string; }' is not assignable to parameter of type 'RequestInit'.
  Types of property 'headers' are incompatible.
    Type '{ 'Content-Type': string; }' is not assignable to type 'Headers | string[][]'.
      Object literal may only specify known properties, and ''Content-Type'' does not exist in type 'Headers | string[][]'.

I have also tried to create a custom header but without any luck:

    let requestHeaders = new Headers();
        requestHeaders.set('Content-Type', 'application/json');
        // I have also tried adding this at the end but no luck 
        // requestHeaders.get('Content-Type');

How could I add a header to this? Because I cannot find any way to make this happen and I don't know what is the problem. If I test these in postman, I get a 200 response, here I get a 401 response. I have also tried this library just to add custom headers: https://www.npmjs.com/package/fetch-headers

I use: Visual studio code 1.81.1 "react-native": "0.50.0", "typescript": "2.6.1"

have you tried using headers: { Accept: 'application/json', 'Content-Type': 'application/json', } in the fetch api — Niladri
– Niladri, Commented Dec 11, 2017 at 13:47
you may need to add credentials: 'include' in the fetch request if you are sending credentials — Niladri
– Niladri, Commented Dec 11, 2017 at 13:50
@Niladri I am sending a username and a password. Yes I have tried with your second suggestion and it said the same thing. I have not tried with credentials, I will trie and come back with an answer. — P.Lorand
– P.Lorand, Commented Dec 11, 2017 at 14:01
@Niladri I have tried with credentials: 'include', it is still not working. — P.Lorand
– P.Lorand, Commented Dec 11, 2017 at 14:39

Peter van Leeuwen · Accepted Answer · 2019-07-30 07:28:36Z

77

+100

Can you try typing it as HeadersInit?

const requestHeaders: HeadersInit = new Headers();
requestHeaders.set('Content-Type', 'application/json');

const responseLogin = await fetch('URL', {
  method: 'POST',
  headers: requestHeaders,
  body: requestBody
});

If not, can you show the error you are getting when you are initiating it with the Headers() constructor, you showed in the question?

edited Jul 30, 2019 at 7:28

answered Mar 19, 2019 at 9:53

Peter van Leeuwen

1,1501 gold badge11 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

sleighty Over a year ago

Same problem here, here's the error I get when typing it as HeadersInit: Type 'Headers' is not assignable to type 'Headers | string[][] | { [key: string]: string; } | undefined'. (How is type Headers not assignable to type Headers | ...?)

Peter van Leeuwen Over a year ago

What is the typescript version you are using in your package.json?

sleighty Over a year ago

It’s ^3.2.2, added automatically by the Firebase cloud functions setup

Peter van Leeuwen Over a year ago

Oke, that isn't the issue then. But you are not required to give a type, so you can also only do const requestHeaders = new Headers();

ondra Over a year ago

The type in the HeadersInit contains other types, not only Headers, so you actually should not put the type there.

A. Goodale · Accepted Answer · 2017-12-11 14:14:07Z

7

What TypeScript libraries are you including with your build? It looks like your definition for the headers property is wrong. In TypeScript 2.6.2, the headers property is of type HeadersInit, which is defined as: type HeadersInit = Headers | string[][] | { [key: string]: string };

answered Dec 11, 2017 at 14:14

A. Goodale

1,35811 silver badges13 bronze badges

2 Comments

P.Lorand Over a year ago

I have tried to add the headers like this: headers: [['Content-Type'] , ['application/json']]. Still it returns a status of 401.

P.Lorand Over a year ago

I have also tried this library: npmjs.com/package/fetch-headers

johannchopin · Accepted Answer · 2022-08-22 20:40:45Z

6

I solved the problem by importing Headers like this:

import fetch, { Headers } from 'node-fetch';

edited Aug 22, 2022 at 20:40

johannchopin

15k11 gold badges64 silver badges125 bronze badges

answered Apr 19, 2020 at 20:23

Camilo Andres Perez Sanchez

712 silver badges5 bronze badges

Comments

Guido Tarsia · Accepted Answer · 2022-02-09 00:55:25Z

The accepted answer has the caveat that it doesn't handle the scenario where you encapsulate fetch into a function of your own that receives the same arguments as fetch and sets defaults to the headers property. For example:

async function myFetch(input: RequestInfo, init: RequestInit) {
  // set some headers here
  const res = await fetch(input, init)
  // return something from the response here, handle errors
}

The problem with the resolved answer is that RequestInit.headers is of type HeadersInit whose definition is:

type HeadersInit = string[][] | Record<string, string> | Headers;

When I try to set defaults for headers but still use headers passed by the calling function, I run into issues because of these possible multiple types that I need to deal with.

What I resolved out of complete exasperation is to define my own RequestInit type where headers is only Record<string, string>. I don't care about the other types, an object of string key/values IS fine.



export interface MyRequestInit extends Omit<RequestInit, 'headers'> {
  headers?: Record<string, string>;
}

export async function fetchJson<JSON = unknown>(
  input: RequestInfo,
  init: MyRequestInit = {},
) {
  // set my own default headers here
  const res = await fetch(input, init)
  // ...
}

Pablo · Accepted Answer · 2023-06-06 07:56:35Z

3

I faced the same issue but the accepted answer would not work in my case because headers might have been already initialized. So

    if (!requestInit.headers) {
      requestInit.headers = new Headers()
    }

    requestInit.headers.set('Content-Type', 'application/json')
    // *TS2339: Property 'set' does not exist on type 'HeadersInit'. Property 'set' does not exist on type 'string[][]'*

Produces compilation error because, like others pointed out, HeadersInit is defined as type HeadersInit = string[][] | Record<string, string> | Headers;

FIX: use constructor with param

requestInit.headers = new Headers(requestInit.headers)
requestInit.headers.set('Content-Type', 'application/json')

answered Jun 6, 2023 at 7:56

Pablo

1,6921 gold badge16 silver badges32 bronze badges

Comments

la Fleur · Accepted Answer · 2024-11-06 12:57:46Z

0

It's 2024, your question is still relevant, and now you can cast the object you pass as a HeadersInit :

let responseLogin = await fetch('http://url_example', {
        method: 'POST',
        headers: {'Content-Type':'application/json'} as HeadersInit,
        body: requestBody
    });

On my system, tsc stops complaining with this cast. To be exact, I haven't tested this with tsc 2.6 (mine is 5.6.3).

answered Nov 6, 2024 at 12:57

la Fleur

6066 silver badges13 bronze badges

Collectives™ on Stack Overflow

typescript Cannot add headers to a fetch api using react-native

6 Answers 6

5 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related