angular2でhttp.getを実行できません

Question

http：// TUTORIALとその他の最新のリソースに続いて、簡単なGET要求を角2でHttpで実行しようとしています。

あなたは、私はいくつかの組み合わせを試してみましたとして、多くのコメントがある見ることができるように成功したHTTPコンポーネントを注入した後、私は次のコード

constructor(@Inject(Http) /* remove @Inject once @Injectable works */ public http:Http){ 
     http.get('https://api.travis-ci.org/config').toPromise().then((response => console.log(response.json().data)) 
     //  .map(res => res.text()) 
     //  .subscribe(
     //  data => console.log(data), 
     //  err => console.error(err), 
     // () => console.log('Random Quote Complete') 
     //); 
    } 

を書きました。私はこれらのエラーに

http.get（...）を取得しています。私は、地図

リクエストヘッダフィールドXを使用しようとするとマップが関数（...）

ではありません-XSRF-TOKENは、プリフライト応答でAccess-Control-Allow-Headersによって許可されていません。

たとえば、（toPromise）などです。

どうすればいいですか？

fetchを使用している場合は、コールが動作しているので、角度のあるものでなければなりません。

Answer 1

「Promise」に関連付けられたメソッドマップ（）はありません。 リンクを確認してくださいAngular 2 HTTP GET with TypeScript error http.get(...).map is not a function in [null]

私はあなたの問題を解決しました。ここで私はオブザーバー/サブスクライバパターンを使用しました。

rxjs-operators.ts

import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/observable/throw'; 

トラヴィス・service.ts

import { Injectable }  from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable }  from 'rxjs/Observable'; 
import './rxjs-operators'; 

@Injectable() 
export class TravisService { 
    constructor (private http: Http) {} 

    getData(): Observable<any> { 
    return this.http.get('https://api.travis-ci.org/config') 
        .map(this.extractData) 
        .catch(this.handleError); 
    } 

    private extractData(res: Response) { 
    let body = res.json(); 
    return body || {}; 
    } 

    private handleError (error: any) { 
    let errMsg = (error.message) ? error.message : 
     error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
    return Observable.throw(errMsg); 
    } 
} 

そして、あなたは以下のコードを使用してデータを登録することができます：あなたは、次のコードを確認してください。

travis.component.ts

import { Component, OnInit, } from '@angular/core'; 
import { TravisService }  from './travis-service'; 

@Component({ 
    selector: 'travis-app', 
    templateUrl: 'app/travis-app.component.html', 
    providers: [TravisService] 
}) 
export class TravisComponent implements OnInit { 
    errorMessage: string; 
    constructor(private travisService: TravisService) { } 
    ngOnInit() { 

     this.travisService.getData().subscribe(
      data => { 
       console.log(data); 
      }, 
      error => this.errorMessage = <any>error 
     ); 
    } 

} 

Answer 2

あなたは本番でこれを使用すべきではありません

export class NoXSRFStrategy implements XSRFStrategy { 
    configureRequest(req: Request) {} 
} 

@NgModel({ 
    providers: [{provide XSRFStrategy, useClass: NoXsrfStrategy}], 
    ... 
}) 

を試すことができます。 トラビスが見逃しているようですAccess-Control-Allow-Headers"X-XSRF-TOKEN"