Angular2 HTTP请求提供者

Question

我想在我的角度应用程序和REST API之间建立连接。 在这里，它返回JSON http://is.njn.mvm.bg/check 。 所以我的问题是，我需要哪些提供程序，因为我将其包含在app.module中，但仍然无法正常工作。 import { HttpModule} from '@angular/http';
我正在使用Angular2 HTTP教程

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

我收到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

您正在使用http请求错误。 请使用以下代码。

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

还请记住您的控制台中发生跟随错误： Access-control-allow-origin

For remove this error see: 

chrome扩展访问控制

Answer 2

您需要在服务器的HTTP响应中放置标头参数“ Access-Control-Allow-Origin”。 您不能仅从客户端进行此工作。 当尝试从Java JSON REST服务器获取数据时，我也遇到了同样的问题。 我不确定您在服务器端使用什么，但是在Java中看起来像这样：

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

有关此错误（CORS）的信息，请参见：

Access-Control-Allow-Origin标头如何工作？

Answer 3

您还需要将其添加到@NgModule imports中

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

Answer 4

您的模块代码如下所示：

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

export class AppModule {

}

您的服务代码需要与此类似

  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

您具有在端口3000上运行的服务器提供的Angular应用程序，但是此应用程序尝试对在另一个端口8000上运行的服务器进行HTTP调用。

您有两个选择：1.将Angular应用程序部署在端口8000上运行的服务器下，在这种情况下，您的Angular应用程序将访问与其提供服务的端口相同的端口。 2.在运行于端口3000的服务器上配置代理，以允许访问端口8000。

对于第二种情况，如果在项目中使用Angular CLI，则创建文件proxy-conf.json，例如：

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

然后像这样将您的Anglar应用程序设置为：

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