角2レストサービスリクエスト

Question

私はa.net Wep APIサービスがうまく動作します。私はAngularjs App.browserコンソールからデータを取得したいときに私にこのエラーを与えました。

getCurrentFeed() :Observable<Tweet[]>{ 

    return this.http.get('http://localhost:6010/GetTweets').map((resp :Response)=>{ 
    console.log(resp.json()); 
    var fetchedTweets=[]; 
    for(let tweet of resp.json().data) 
    { 
    fetchedTweets.push(this.getTweetFromJson(tweet)); 

    } 
    return fetchedTweets as Array<Tweet>; 
}); 

} 

XMLHttpRequestはhttp://localhost:6010/GetTweetsをロードできません。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。 Origin 'http://localhost:4200'はアクセスできません。 error_handler.js：54例外：URLのステータスが0の場合：null

Answer 1

クライアントアプリケーションはポート4200で動作するdevサーバーによってサービスされるため、クライアントは他のサーバーにアクセスすることはできませんクライアントへのアクセスを許可するように構成されています。

devモードでは、サーバーのヘッダーを構成する必要はありません。クライアント上に単純なプロキシを設定するだけです。以下の内容で、プロジェクトのルートにあるファイルのプロキシconf.jsonを作成します。

{ 
    "/GetTweets": { 
    "target": "http://localhost:6010", 
    "secure": false 
    } 
} 

次にようにアプリを実行し、

最後

this.http.get('/GetTweets') 

であるためにあなたのコードから完全なDNS名を削除次の：

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

4200上で動作するサーバーには6010上で動作するサーバへのURLに/ GetTweetsを持っているあなたのGET要求をリダイレクトします、そしてあなたは、このエラーを取得されることはありません。