CORS issue for Ionic + express

Question

I have created an application that is accessing/fetching the data from mongo/node+express, which is on different domain(eg domain_name).

The code for the get function is :

var request = $http({
            method: 'GET',
            url: 'https://domain_name.users.io/categories/list',
            withCredentials: true  /* to get the Cookie value generated at server-side */
        });

At the express side, have added the following code in order to avoid the CORS issue:

 res.header("Access-Control-Allow-Origin", "*");
 res.header("Access-Control-Allow-Methods","GET,PUT,POST,DELETE,OPTIONS");
 res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
 res.header("Access-Control-Allow-Credentials", "true");

For the above, i am getting the following error:

XMLHttpRequest cannot load https://domain_name.users.io/data/list. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://localhost:8100' is therefore not allowed access.

I have checked the API "https://domain_name.users.io/data/list" and there is no issue with it as i can see the data(when hit on browser).

Could someone please help me for the same

do you access to https://domain_name.users.io/categories/list via localhost? if you do so, i think you can use httpclient to access to https://domain_name.users.io/categories/list — Python Basketball, Jan 28 '16 at 05:48

score 0 · Answer 1 · edited May 23 '17 at 11:44

0

Besides * is too permissive and would defeat use of credentials. So use https://domain_name.users.io/data/list rather than you use *.

You can't do like * because this is a part of security and if you want to allow credentials then your Access-Control-Allow-Origin must not use *.

For more please read here.

edited May 23 '17 at 11:44

Community

1
1

answered Jan 28 '16 at 05:48

AddWeb Solution Pvt Ltd

21,025
5
26
57

Changed the `res.header("Access-Control-Allow-Origin", "*");` to `res.header("Access-Control-Allow-Origin", "https://domain_name.users.io")` Now getting this error ``XMLHttpRequest cannot load https://domain_name.users.io/data/list. The 'Access-Control-Allow-Origin' header contains multiple values 'https://domain_name.users.io, *', but only one is allowed. Origin 'http://localhost:8100' is therefore not allowed access.` – Rohan Kangale Jan 28 '16 at 05:54
My mistake, I think localhost is dev version and domain.com is API server. So you want it to set Access-Control-Allow-Origin header to http://localhost:8100 only, no other values appended. – AddWeb Solution Pvt Ltd Jan 28 '16 at 06:40
Thanks it worked :) .. but what if i want to access the same from mobile ? If i create an .apk file and installed it on mobile, i think it will not. Right ? So what would be the solution for this ??? – Rohan Kangale Jan 28 '16 at 07:11
As per my knowledge there is nothing to do like this for .apk – AddWeb Solution Pvt Ltd Jan 28 '16 at 07:16
ok. i tried the same. created an .apk file and install it my mobile device. but now the data is not coming, and i think it's because of the origin that we have defined at server side. i.e. **http://localhost:8081** – Rohan Kangale Jan 28 '16 at 07:26
Sorry @rohan kangale, Please ask this as new question. – AddWeb Solution Pvt Ltd Jan 28 '16 at 07:29

Karan · Answer 2 · 2016-01-28T07:55:11.310

Must set the headers:

var request = $http({
            method: 'GET',
            url: 'https://domain_name.users.io/categories/list',
           headers:{'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
            withCredentials: true  /* to get the Cookie value generated at server-side */
        });

==============ON Node Side===============

app.use(function(req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type, Authorization, Access-Control-Allow-Origin, Access-Control-Allow-Headers');
 next();
});

CORS issue for Ionic + express

2 Answers2