JS fetch, not getting headers on response

Question

I'm making a request using fetch to wordpress api, but I get a empty headers object on the response, anyone knows why?

here's my fetch action

export const getJobs = () => {
  return dispatch => {
    fetch(endpoints.jobs)
      .then(res => res.json())
      .then(data => dispatch(setJobs(data)))
  }
};

and here's the object that I get before doing res.json

body: (...)
bodyUsed: false
headers: {}
ok: true
redirected: false
status: 200
statusText: "OK"
type: "cors"
url: "url"

any ideas on how I can get all the headers from the response?

Answer 1

There is a restriction on accessing response headers when using CORS. Since your response type is cors that might be the culprit.

See this answer for details.

Answer 2

Just because the console shows {} for headers, that doesn't necessarily mean that there aren't any accessible headers. If any were sent, they should be accessible on res.headers, which is a Headers object, which...

...allows you to perform various actions on HTTP request and response headers.

...for instance, with get.

For example, if setJobs needs the foo header:

export const getJobs = () => {
  return dispatch => {
    fetch(endpoints.jobs)
      // Read and parse the body and then return an object with the body data and the `foo` header
      .then(res => res.json().then(data => ({data, foo: res.headers.get("foo")})))
      // Receive the body data and the `foo` header and pass them on to `setJobs`
      .then(({data, foo}) => dispatch(setJobs(data, foo)))
  }
};