CORS ISSUE in Angular2

Question

I am using webpack angular2 starter kit (https://github.com/AngularClass/angular2-webpack-starter) for my application and now i have an issue.

I try to make get call

getSomeData(): Observable<any> {
  let url =  here is my api URL;
  let headers = new Headers({ 'Content-Type': 'application/json; charset=utf-8', "Access-Control-Allow-Origin": "*", 'dataType': 'json', });
  let options = new RequestOptions({ headers: headers });

  return this._http.get(url, options).map(res => res.json());
}

And I have next error

XMLHttpRequest cannot load (my URL) Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 405.

This Api (It using firebird) returns XML by default, maybe this cause a problem.

How to make that always came JSON?
How to fix this problem with CORS?

If it's Express, you can just use this package and follow the instructions: https://www.npmjs.com/package/cors — Maximilian Riegler, May 23 '16 at 11:14

score 1 · Accepted Answer · answered May 23 '16 at 11:11

This issue is at the server side. The latter must return a Access-Control-Allow-Origin header in the response of the HTTP call.

Most of time, there are tools you can plug into your server application to do this for you. The server knows that CORS headers must be returned when the client sends a Origin header (automatically added by the browser).

See this article for more details about CORS:

http://restlet.com/blog/2015/12/15/understanding-and-using-cors/

CORS ISSUE in Angular2

1 Answers1

Linked