javascript - Fetch answer empty due to the preflight? - Stack Overflow

admin管理员组

文章数量:1350451

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 ?

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 ?

• javascript
• go
• redux
• fetch-api

Share Improve this question Follow edited May 23, 2017 at 12:24 CommunityBot 111 silver badge asked Feb 6, 2016 at 11:33 ManawaspManawasp 55711 gold badge66 silver badges1414 bronze badges 1

• 1 Are you aware you are returning from your then() handler after the logs? – Salva Commented Feb 10, 2016 at 13:15

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

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 ma-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?

本文标签： javascriptFetch answer empty due to the preflightStack Overflow