How to send HTTP headers in ReactJS using fetch()

Question

const URL = "http://url.com";
fetch(URL).then(res => res.json()).then(json => {
    this.setState({ someData: json });
});

How to send HTTP request with HTTP headers?

Possible duplicate of [Fetch GET Request with custom headers ReactJS](https://stackoverflow.com/questions/42862202/fetch-get-request-with-custom-headers-reactjs) — SomeGuyOnAComputer, Apr 29 '18 at 19:00

score 4 · Accepted Answer · answered Apr 29 '18 at 16:33

4

Try this

fetch('your_url', { 
   method: 'get', 
   headers: new Headers({
     // Your header content
   })
 });

answered Apr 29 '18 at 16:33

Karthik S

1

Why use `new Headers` here? Why don't you just use `headers: { ... }`? – Joshua Apr 30 '18 at 01:02
1

Check https://github.github.io/fetch/#Headers, The option can take either object or Headers. Maybe fetch api internally converts object to Headers. Thus i have passed direct Headers to fetch option. – Karthik S Apr 30 '18 at 05:51
@konekoya Array or Headers object both are acceptable – Yasir Shabbir Choudhary Aug 17 '20 at 06:31

score 4 · Answer 2 · answered Apr 29 '18 at 16:33

4

You can just pass them into fetch():

const API = 'foo';

fetch(API, { headers: {
  'user-agent': 'Mozilla/4.0 MDN Example',
  'content-type': 'application/json'
}}).then()

You can read more on that here.

answered Apr 29 '18 at 16:33

Colin Ricardo

score 3 · Answer 3 · answered Apr 29 '18 at 19:47

Inside the fetch() method you should do something like this

fetch(url, {
    ...    
    headers: {
       'user-agent': 'Mozilla/4.0 MDN Example',
       'content-type': 'application/json'
    }

3 Answers3