javascript - Fetch answer empty due to the preflight? -


i have webapp react.js / redux / webpackt / es6... , api in go mux gorilla.
when make call function below header empty , content too.

i'm using package in webapp 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 beginning had problem cors how handle preflight cors requests on go server used solution

we can call inside of console :

login   options   200   fetch   auths.actions.js:38 352 b   1 ms     login   post      200   json    other   567 b   82 ms 

when inside of post header response 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 response handle preflight information not post ? because there nothing inside of response.headers , response.headers.get("authorization") there wrong ?

i had problem headers sent, correctly received (chrome's network tab correctly shows me sent headers), couldn't access them in js (response.headers empty). described in fetch request returns empty headers, happened because server did not set access-control-expose-headers header, resulting in needed headers not exposed js. solution add header on server , voilĂ , headers accessible in js:

access-control-expose-headers: <header-name>, <header-name>, ... 

the header takes comma-separated list of header-names exposed browser.

for additional info on why header needed, see why access-control-expose-headers needed?


Comments

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

java - No use of nillable="0" in SOAP Webservice -

ubuntu - Laravel 5.2 quickstart guide gives Not Found Error -