Headers object for fetchAPI is always empty

Question

I have this request function that is wrappers around the fetch API to issue request to my API. But when my frontend app issues request, the headers object is always empty. What am I doing wrong ?

export function request(method, url, payload) {
  const body = JSON.stringify(payload);
  const headers = new Headers();
  headers.append('Content-Type', 'application/json');
  const parameters = {
    headers: headers,
    method: method,
    body: body,
    cache: "default"
  };
  return Observable.create(observer => {
    fetch(url, parameters)
      .then(response => {
        observer.next(response);
        observer.complete();
      })
      .catch(error => {
        observer.error(error);
      });
  });
}

Answer 1

Have you checked in the network tab of the DevTools if the headers are really missing?

I have the same trouble than you describe, my Header object seems always empty from the Chrome DevTools, but if try to check a specific header like

let headers = new Headers({'X-whatever-name': 'whatever-value'});
myHeader.has('X-whatever-name'); // returns true

Also if I check the detail of the Request Headers in the DevTools (Networking tab), I can see that my custom headers are sent properly.

So only the JS api (entries, keys, ...) seems to be broken for me, but the request is correctly sent.