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.

You are triggering CORS as one of the answers shows. Can you move your static angular2 content to the same server that is serving the REST call, most modern java servers can also serve static content. The problem is that localhost:3000 is serving the content and localhost:8000 is serving the REST call which is not allowed. — AlexC, Nov 17 '16 at 12:59

score 2 · Answer 1 · edited May 23 '17 at 12:09

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

score 1 · Answer 2 · edited May 23 '17 at 12:32

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?

score 0 · Answer 3 · answered Nov 17 '16 at 11:19

0

You also need to add it to imports of @NgModule

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

answered Nov 17 '16 at 11:19

Günter Zöchbauer

623,577
216
2,003
1,567

Can you reproduce in a Plunker? – Günter Zöchbauer Nov 17 '16 at 12:04

score 0 · Answer 4 · answered Nov 17 '16 at 12:57

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);
  }

score 0 · Answer 5 · answered Nov 17 '16 at 13:15

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

Angular2 HTTP Request Providers

5 Answers5