角型アプリケーションでAPIデータを取得できませんでした。Access Control-Allow-Originがスローされました。

Question

私はapi呼び出しを使用してユーザー情報を取得するためのユーザーサービスを作成しました。

user.service.ts 

getBasicInfo(): Observable<any> { 
      return this.http.get(this.config.apiUrl + 'api/supplier-basic-info/' + 'userID') 
      .map(res => res.json()); 
     } 

、私はこのように観察を書かれているコンポーネントで：次に

<div>{{getBasicInfo()}}</div> 

：

user.component.ts 

getBasicInfo(){ 
    this._userService.getBasicInfo().subscribe(
     data => this.supplierInfo = data.results 
    ); 
    } 

と私は、このようなHTMLコンポーネントにデータをバインドしようとしていますコンソールにエラーが表示されます：

Failed to load http://<SOME.IP.ADDRESS.>/api/supplier-basic-info/54: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 403. 

なぜHTMLでデータを取得できないのですか？誰かが私にこれを助けることができますか？バックエンドの開発者がクッキーにユーザーの詳細を格納しているので。それ以外は、データを取得し、HTMLページでAngularを使用してバインドする必要があります。私はこのAngular4コンポーネントベースのプログラミングには非常に新しいです。

ありがとうございました。

Answer 1

これはフロントエンドコードとは関係ありません。これを最適化することはできますが、それは別の話になります。

問題は、CORSがアクティブ化されていないことです。 CORS

サーバー側の構成でCORSをアクティブ化する必要があります。あなたの技術を指定していないので、私は正確なリンクであなたを助けることはできません。