Angular2 HTTP請求供應商

我想讓我的角度應用程序，我的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.

來源

2016-11-17 Ioan Stoianov

您正在引發CORS爲其中一個答案顯示。您可以將靜態的angular2內容移動到服務於REST調用的服務器上，大多數現代Java服務器也可以提供靜態內容。問題是localhost：3000服務於內容，localhost：8000服務於REST調用，這是不允許的。 – AlexC

您還需要將其添加到imports的@NgModule

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

來源

2016-11-17 11:19:12

是的，我這樣做，但仍然不工作 –

你可以在一個Plunker重現嗎？ –

你需要把頭參數「訪問-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?

來源

2016-11-17 12:44:40

你的模塊代碼會像下面：

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

來源

2016-11-17 12:57:34

您有我們先在端口3000上運行的服務器提供服務的角度應用程序，但這個程序試圖使HTTP服務器調用另一個端口8000

上運行，則有兩種選擇：1。部署在端口8000上運行的服務器，在這種情況下，你的角應用程序將打它是從服務的同一端口下的角應用。 2.配置在端口3000上運行，以允許訪問端口8000

對於第二種情況，如果你使用角度CLI與您的項目在服務器上的代理，建立檔案代理conf.json，例如：

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

然後塞夫爾你Anglar應用程序是這樣的：

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

來源

2016-11-17 13:15:34

您正在使用的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

來源

2017-03-02 06:22:35

Angular2 HTTP請求供應商

回答

相關問題