0

I'm Trying to retrieve a bearer token from my ASP API from my ionic2 app.

I have enabled CORS on the API as shown below:

    var cors = new EnableCorsAttribute("*", "*", "*");
        config.EnableCors(cors);

This enabled me to form a POST request from my ionic 2 app to my API in order to register a user. This works wonderfully. The request I used for this is as shown below:

  let headers = new Headers({
    'Content-Type': 'application/json'
  });


  let options = new RequestOptions({
    headers: headers
  });

  let body = JSON.stringify({
    Email: credentials.email,
    Password: credentials.password,
    ConfirmPassword: credentials.confirmPassword
  });      

  return this.http.post('http://localhost:34417/api/Account/Register', body, options)

However when I try to retrieve a token from my API I receive the following error:

    No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

The request I'm using to try and retrieve the token is as follows:

    let body = "grant_type=password" + "&userName=" + credentials.email + "&password=" + credentials.password;
let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
let options = new RequestOptions({ headers: headers });    
return this.http.post('http://localhost:34417/token', body, options)

This is the only request that is throwing this error, all other requests to my API work fine.

Have I missed anything, or am I doing something wrong?

Charles Webb
  • 45
  • 1
  • 6

1 Answers1

0

var cors = new EnableCorsAttribute("*", "*", "*");

Looks like you are setting Access-Control-Allow-Origin as *.

Check MDN CORS Requests with credentials.

Credentialed requests and wildcards

When responding to a credentialed request, the server must specify an origin in the value of the Access-Control-Allow-Origin header, instead of specifying the "*" wildcard.

You will have to set a specific url if you use credentials. Or if you only intend to use only for ionic 2, you could avoid the cors issue by setting a proxy.

According to the official blog:

The proxies settings contain two things: the path you use to access them on your local Ionic server, and the proxyUrl you’d ultimately like to reach from the API call.

{
  "name": "ionic-2-app",
  "app_id": "my_id",
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://localhost:34417/api"
    }
  ]
}

Ionic serve command by default will start server on localhost:8100. The set proxy will hit your http://localhost:34417/api.

Your path in the requests will be to the localhost:8100/api instead of your actual server.

Community
  • 1
  • 1
Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
  • I am only intending this API to be used by my ionic 2 app, however I have tried to set a proxy on the app but fear I am doing it wrong, what exactly needs to be added to "Path" and "ProxyUrl"? Most of the examples are very specific to the person asking the question and do not mention what exactly those two are referring to – Charles Webb Apr 24 '17 at 10:55
  • Thank you for clearing that up, however the call to retrieve a token from an ASP api does not fall under the Url/api/token. The scalls to the Url/api/etc/etc work as expected, it is ONLY the call to url/token that is throwing the error – Charles Webb Apr 24 '17 at 11:08
  • What if you set the proxyUrl as `http://localhost:34417`? then your req urls will be `localhost:8100/api/token` for this.. and `localhost:8100/api/api/..` for the rest.. – Suraj Rao Apr 24 '17 at 11:14
  • this doesn't work as the ionic 2 app is hosted on localhost:8100, however the API is being hosted on locahost:34417, setting the proxy seems to send all my http requests to localhost:8100 which does not host the API, therefore it just comes back telling my the URL doesn't exist – Charles Webb Apr 24 '17 at 11:18
  • In that case either you will have to consider server side changes to set cors correctly or change token url.. or try solely in device/emulator – Suraj Rao Apr 24 '17 at 11:23