Fetch answer empty due to the preflight?

Question

I have an webapp react.js / redux / webpackt / es6... and an api in go with mux from gorilla.
When I make call with the function below my header is empty and content too.

I'm using this package in my webapp to make calls

"isomorphic-fetch": "^2.2.1",

My call example

export function Login(userData) {
  return dispatch => {
    fetch(API + '/login', {
      method: 'post',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email: userData.email,
        password: userData.password,
      }),
    })
    .then(response => {
      console.log(response);
      console.log(response.statusText);
      console.log(response.status);
      console.log(response.headers);
      console.log(response.headers.get("Authorization"));
      console.log(response.json());
      return response.json()
      if (response.status >= 200 && response.status < 300) {
        console.log(response);
        dispatch(LoginSuccess(response));
      } else {
        const error = new Error(response.statusText);
        error.response = response;
        dispatch(LoginError(error));
        throw error;
      }
    }).then(function(json) {
      console.log('parsed json' + json)
    })
    .catch(error => { console.log('request failed', error); });
  }

In the beginning I had a problem with cors How to handle preflight CORS requests on a Go server I used this solution

We can look the call inside of the console :

login   OPTIONS   200   fetch   auths.actions.js:38 352 B   1 ms    
login   POST      200   json    Other   567 B   82 ms

When I look inside of my POST Header response I have :

HTTP/1.1 200 OK
Access-Control-Allow-Headers: Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, PATCH, DELETE
Access-Control-Allow-Origin: http://localhost:3000
Authorization: Bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE0NTQ3NTcxNjEsInVzZXJfaWQiOiI1NmI1YjZlOTFhZTMzYjAwMDFhYmE1MTQifQ.WGoTMxm6OuN24Olwr93J3pND9dFLCtG5MyiRbqLWeD244JtDzq0bGgQMixeZxyuxwGK3u8KhyWD7Rr6iZAGNpA
Content-Type: application/json
Date: Sat, 06 Feb 2016 11:12:41 GMT
Content-Length: 2

So the response handle my preflight information not my POST ? Because there is nothing inside of the response.headers and response.headers.get("Authorization") There is something wrong ?

Answer 1

I had the problem that my headers were sent, correctly received (chrome's network tab correctly shows me all the sent headers), but I couldn't access them in js (response.headers was empty). As described in Fetch get request returns empty headers, this happened because the server did not set the Access-Control-Expose-Headers header, resulting in the needed headers not to be exposed to js. So the solution is to add this header on the server and voilà, now the headers are accessible in js:

Access-Control-Expose-Headers: <header-name>, <header-name>, ...

The header takes a comma-separated list of header-names to be exposed to the browser.

For additional info on why this header is needed, see Why is Access-Control-Expose-Headers needed?