2016-11-17 119 views
0

我想让我的角度应用程序,我的REST API之间的连接。 这返回JSON http://is.njn.mvm.bg/check。所以我的问题是我需要哪些提供者,因为我包含在app.module中,但它仍然不起作用。 import { HttpModule} from '@angular/http';
我使用Angular2 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.

+0

您正在引发CORS为其中一个答案显示。您可以将静态的angular2内容移动到服务于REST调用的服务器上,大多数现代Java服务器也可以提供静态内容。问题是localhost:3000服务于内容,localhost:8000服务于REST调用,这是不允许的。 – AlexC

回答

0

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

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

是的,我这样做,但仍然不工作 –

+0

你可以在一个Plunker重现吗? –

1

你需要把头参数“访问-Control-Allow-Origin“在服务器的HTTP响应中。您不能仅从客户端进行此项工作。尝试从我的Java JSON REST服务器获取数据时,我也遇到了同样的问题。我不知道你用的什么服务器端,但在Java它看起来是这样的:

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

。有关这个错误(CORS),看到这一点:

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

0

你的模块代码会像下面:

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

您有我们先在端口3000上运行的服务器提供服务的角度应用程序,但这个程序试图使HTTP服务器调用另一个端口8000

上运行,则有两种选择:1。 部署在端口8000上运行的服务器,在这种情况下,你的角应用程序将打它是从服务的同一端口下的角应用。 2.配置在端口3000上运行,以允许访问端口8000

对于第二种情况,如果你使用角度CLI与您的项目在服务器上的代理,建立档案代理conf.json,例如:

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

然后塞夫尔你Anglar应用程序是这样的:

NG服务--proxy-配置代理conf.json

2

您正在使用的http请求错误。 PLZ使用下面的代码。

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

还记得发生在控制台 跟踪误差: 访问控制允许来源

For remove this error see: 

chrome extension for access control