Request header are not filled using Fetch API

Question

I am experimenting a things that I don't understand. When I try to set headers of a request using the Fetch API, no headers are actually defined.

Here is a piece of code and a link to a fiddle to be able to reproduce.

function createRequest(type, url, payload) { const options = { headers: { "Content-Type": "application/json", "x-request-id": '...', "x-sender-id": "mysender" }, method: 'POST', body: JSON.stringify(payload), mode: 'no-cors', cache: 'no-cache' }; return new Request(url, options); } // ----------------------------- // a simple test const request = createRequest('post', '/check', {test: 'where are my headers?'});

When I create the headers using the Headers object, headers are dropped out. This is the case even if I am using the set or append method to fill headers. Using new Headers({...}); as it is stated here does not solve the issue. Changing the mode also produces no change. Folowing this also fails.

Link to the fiddle

As a result, no headers (and no body I guess) are defined.

If somebody has an idea about the issue, I'll take it :D

Regards.

Bravo · Accepted Answer · 2019-10-26 10:43:07Z

Since you are using mode: 'no-cors' you are restricted to simple headers

accept
accept-language
content-language
content-type

That's all the headers you are allowed in no-cors mode

source: documentation

below, the first request is made mode no-cors and the second mode same-origin (though, this could also be cors and would work the same)

// Code goes here function createRequest(type, url, payload, corsmode) { const options = { headers: { "Content-Type": "application/json", "x-request-id": '...', "x-sender-id": "mysender" }, method: 'POST', body: JSON.stringify(payload), mode: corsmode, cache: 'no-cache' }; return new Request(url, options); } // ----------------------------- // a simple test const request = createRequest('post', '/check', { test: 'where are my headers?' }, 'no-cors'); console.log([...request.headers.entries()]); const request2 = createRequest('post', '/check', { test: 'where are my headers?' }, 'same-origin'); console.log([...request2.headers.entries()]);

@ollie314 - I've added a code snippet to show the difference and to show how you can log the headers to the console

Collectives™ on Stack Overflow

Request header are not filled using Fetch API

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related