Angular 2 Rest service request

Question

I have a.net Wep API service which works fine .When i want to get data from Angularjs App.browser console gave me this error .

getCurrentFeed() :Observable<Tweet[]>{

  return this.http.get('http://localhost:6010/GetTweets').map((resp :Response)=>{
    console.log(resp.json());
    var fetchedTweets=[];
    for(let tweet of resp.json().data)
    {
     fetchedTweets.push(this.getTweetFromJson(tweet));

    }
    return fetchedTweets as Array<Tweet>;
});

}

XMLHttpRequest cannot load http://localhost:6010/GetTweets. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. error_handler.js:54 EXCEPTION: Response with status: 0 for URL: null

how can i apply header here – chamila9999 perera Jun 26 '17 at 17:35 — chamila9999 perera, Jun 26 '17 at 17:35

score 0 · Accepted Answer · answered Jun 26 '17 at 20:16

Since your client app is served by a dev server that runs on the port 4200, the client is not allowed to access other servers unless they are specifically configured to allow the access to your client.

You don't have to configure the server's header while in dev mode. Just configure a simple proxy on the client. Create a file proxy-conf.json in the root of your project with the following content:

{
  "/GetTweets": {
    "target": "http://localhost:6010",
    "secure": false
  }
}

Then remove the full DNS name from your code to be

this.http.get('/GetTweets')

Finally, run your app as follows:

ng serve --proxy-config proxy-conf.json

Your server that runs on 4200 will redirect your get requests that have /GetTweets in the URL to the server that runs on 6010, and you won't be getting this error.

Thank you so much for the answer it works fine for me – chamila9999 perera Jun 27 '17 at 18:47 — chamila9999 perera, Jun 27 '17 at 18:47

Angular 2 Rest service request

1 Answers1