Angular2 HTTP Request Providers

Question

I want to make connection between my angular app and my REST API. Here it returns JSON http://is.njn.mvm.bg/check . So my question is which providers do I need because I include in app.module, but it still doesn't work. import { HttpModule} from '@angular/http';
I am using Angular2 HTTP tutorial

  private heroesUrl = 'http://is.njn.mvm.bg/check';  // URL to web API
  constructor (private http: Http) {}
  getHeroes (): Observable<Hero[]> {
    return this.http.get(this.heroesUrl)
                    .map(this.extractData)
                    .catch(this.handleError);
  } 

I am getting XMLHttpRequest cannot load http://localhost:8000/da. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. XMLHttpRequest cannot load http://localhost:8000/da. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

Answer 1

you are using the http request wrong. plz use following code.

app.component.ts

 //our root app component import { Component } from '@angular/core' import { Http } from '@angular/http'; import 'rxjs/add/operator/map'; @Component({ selector: 'root', template: ` <div> {{people}} {{ err}} </div> ` }) export class App { people; err; constructor(http:Http) { http.get('http://is.njn.mvm.bg/check').map(res => res.text()).subscribe(people => this.people = people,err=>this.err = err); // Subscribe to the observable to get the parsed people object and attach it to the // component } } 

Also remember Follow error occur in your console: Access-control-allow-origin

For remove this error see: 

chrome extension for access control

Answer 2

You need to put header parameter "Access-Control-Allow-Origin" in the server's HTTP response. You can't make this work from the client side only. I also had the same issue when trying to grab data from my Java JSON REST server. I am not sure what you use server side, but in Java it looks something like this:

return Response.ok() //200
            .header("Access-Control-Allow-Origin", "*");

For information on this error (CORS), see this:

How does Access-Control-Allow-Origin header work?

Answer 3

You also need to add it to imports of @NgModule

@NgModule({
  imports: [BrowserModule, HttpModule]
  ...
})

Answer 4

You module code will be like below:

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
  ],
  declarations: [
    AppComponent
  ],
  providers: [
    {provide: APP_BASE_HREF, useValue: '/'},
  ],
  bootstrap: [AppComponent]
})

export class AppModule {

}

you service code need to similar to this

  constructor(private http: Http) {
  }

  getCountriesByRegion(region: string) {
    return this.http.get(this.countries_endpoint_url + region).map(res => res.json());
  }


//you can also do like this
  getHeroes(): Observable<any[]> {
    return this.http.get(this.heroesUrl)
      .map(this.extractData)
      .catch(this.handleError);
  }

Answer 5

You have the Angular app that's served by the server running on port 3000, but this app tries to make HTTP calls to the server running on another port 8000.

You have two options: 1. Deploy your Angular app under the server that runs on port 8000, in which case your Angular app will hit the same port it was served from. 2. Configure a proxy on the server that runs on port 3000 to allow access to port 8000.

For the second scenario, if you use Angular CLI with your project, create a file proxy-conf.json, for example:

{
  "/api": {
    "target": "http://localhost:8000",
    "secure": false
  }
}

Then sevre your Anglar app like this:

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