fetch API cannot load error with cors in chrome/firefox

[mkaushik10]

Hi,
I have a REST API which allows my UI url as origin. My web UI is using fetch to get and post data by choosing 'mode: cors'. This works fine in IE but not in chrome/firefox.
I am using below code to get data from my api which is on a different domain.

fetch(url, {
     mode: 'cors',
});

But I get this error.

Any help with this would be greatly appreciated. Any pointers on how to get this to work with chrome/firefox?
Thanks.

[dgraham]

The browser's error message describes the requirements for this request to complete successfully. The server must grant access to the requested resource to your remote domain by sending a Access-Control-Allow-Origin response header.

These past tips might help too:

• How to do a no-cors request to flickr open api? #280 (comment)
• Cross Origin Request when Access-Control-Allow-Origin is set to * #277 (comment)
• How to set Authorization and Timeout  #181 (comment)
• How to set Authorization and Timeout  #181 (comment)

[voidException]

let defaultOptions = {
url:'',
method:'POST',
mode: 'cors',
headers:{
'Access-Control-Allow-Origin':'*'
},
body:null,
};

let UploadFile=function(options){

let header = new Headers({
    'Access-Control-Allow-Origin':'*',
    'Content-Type': 'multipart/form-data'
});
let opt = Object.assign({}, defaultOptions, options); //将默认的参数和传过来的合并在一起
let sentData={
    method:opt.method,
    mode: 'cors',
    header: header,
    body:opt.body || ''
};
return new Promise((reslove,reject)=>{
    fetch(opt.url, sentData)
        .then(response=> response.json())
        .then(responseText=>{
            let resp = typeof responseText === 'string' ? JSON.parse(responseText) : responseText;
            //console.log(resp);
            reslove(resp); //这个resp会被外部接收
        }).catch(err=>{
        //console.log(err);
        reject(err);
    });
}).catch(err => {
        console.log('出错了');
    });

}
export default UploadFile;

you must use
let header = new Headers({
'Access-Control-Allow-Origin':'',
'Content-Type': 'multipart/form-data'
});
instead of let defaultOptions = {
url:'',
method:'POST',
mode: 'cors',
headers:{
'Access-Control-Allow-Origin':''
},
body:null,
};
to add 'Access-Control-Allow-Origin':'*'

[voidException]

when you user spirngmvc ,you should do as :
@RequestMapping(value = "/logout", method = RequestMethod.GET)
public LoginDto logout(HttpServletRequest request, HttpServletResponse resp) {
resp.setHeader("Access-Control-Allow-Origin", "*");
LoginDto loginDto = new LoginDto();
request.getSession().removeAttribute("user");
loginDto.setMessage(ResultMessage.SUCCESS);
return loginDto;
}

then it works !

[futurechallenger]

Well, If you use loalhost or 127.0.0.1 as I do in Google Chrome you will definitely met this problem, you would like to use a chrome Extension to get fetch work. This is all in a stack overflow answer