Angularでのクロスドメインの対応方法について

Question

現在Angular(v6.0.4)を使ってフロントエンド部分を開発しているのですが、ローカルで動かしている自作APIからのデータ取得がうまくいきません。

chromeのコンソールを確認すると下記のように表示がありました。

Failed to load http://localhost:8000/api/test: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

クロスドメインによる問題だと調べて分かったのでヘッダー情報を付与してアクセスするようにコード修正を行いましたがやはりうまくいきません。。
これは私の書き方がよくないのでしょうか？どなたかご存知であればご教示頂けないでしょうか。

  get(): Observable<any> {
    return this.http.get<Planet[]>(environment.API_SERVER + 'test',
      {
        headers: new HttpHeaders({ 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Headers': 'Origin' })
      });
  }

Answer 1

記憶で書きます
Api側のweb.configのweb.service>httpprotcol>costomheader>addで
Access-Control-Allow-Originをキー、バリューにhttp://localhost:4200(末尾スラッシュいるかも。いらないかも。)を追加

Api側がcredentialsを要求している場合(ad認証とか？)は↑のaddを追加してcredentialsをtrueに設定する

呼び出し側のrequestHeaderにもcredentialsにtrueを設定する(angular側のリクエストヘッダーにAccess-Control-Allow-Originは不要です。)

web.configで一律でレスポンスヘッダーを設定したくない場合は
Controllerの返却時に個別にレスポンスヘッダー付与してください

Answer 2

これはフロント側というよりサーバ側の設定が必要なのではないでしょうか
クロスドメインを認めるか認めないかみたいな設定があるはずです

Comments

[Mmz]

ありがとうございます！ご指摘の通りでした。
LaravelでAPIの開発をしていたのですがapi.phpにクロスドメインを許可する記述を追加することで無事にデータ取得できました。