CORS problem with Ionic and angular 2 "No 'Access-Control-Allow-Origin' header is present on the requested resource"

[amrayoub]

Hello.
I have a problem with getting data from an api on ionic 2 app.

that’s what i get

my code to grab the data

"
import { Injectable } from ‘@angular/core’;
import { Http } from ‘@angular/http’;
import ‘rxjs/add/operator/map’;

/*
Generated class for the Service provider.

See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular 2 DI.
*/
@Injectable()
export class NewsService {
data: any;
private news;

constructor(private http: Http) {
this.data = null;
}

load() {
if (this.data) {
// already loaded data
return Promise.resolve(this.data);
}

// don't have the data yet
return new Promise(resolve => {
  // We're using Angular Http provider to request the data,
  // then on the response it'll map the JSON data to a parsed JS object.
  // Next we process the data and resolve the promise with the new data.
  this.http.get('http://api.steampowered.com/ISteamNews/GetNewsForApp/v0002/?appid=437220&count=10&format=json')
    .map(res => res.json())
    .subscribe(data => {
      // we've got back the raw data, now generate the core schedule data
      // and save the data for later reference
      this.data = data;
      resolve(this.data);
    });
});

}
}

"

any help please

[amrayoub]

1# update , i found temporary solution by installing this plugin on chrome

Allow-Control-Allow-Origin: *

Allow-Control-Allow-Origin: *

[hhhung]

It happens when you are running serve. Ionic CLI support proxy to pass this problem. Add this to ionic.config.json:

"proxies": [
    {
        "path": "/api",
        "proxyUrl": "http://api.steampowered.com"
    }
]

Now you can use http://localhost:8100/api/ISteamNews…

[inanchao]

Thank you

[richcheng]

How do you get around cors if your ionic 2 app is HOSTED ON THE CLOUD, providers such as goDaddy.com, Azure, and AWS ?

Thanks, Rich

[amrayoub]

Hi , you have to use proxies like this

“proxies”: [
{
“path”: “/api”,
“proxyUrl”: “http://api.steampowered.com”
}
]

[damstra_apps]

Thank you so much :)).

[sergi95]

If you use php on server then write header(‘Access-Control-Allow-Origin: *’); in your controller and its done

[tayoraph]

Sorry I am having the same issue here.
i have included the proxy in my ionic.config.json, but i ma still having same issue,

My question is after I put the proxy in my ionic.config.json file , how do i use it in my http request ?
i meant how do I call the url in my http request, Will I be writing my external api url like the below

http://ebc.com/you/database/me.php
or I will change the ebc.com to localhost:8100?

below is my config file
"proxies": [
{
“path”: “/you”,
“proxyUrl”: “http://www.ebc.com.ng/”
}
]

below is my http request

var login = “http://localhost/you/database/me.php”;

return this.http.get( login)
.map(res => res.json()); // Mapping the response to json format
}

[lolaswift1]

Hi Rich,
I have exactly the same question and I am facing the issue with aws hosted website.Have you found a solution.
thx

[033063025]