Angular CLIでプロキシファイルを設定する方法

Angular CLIでプロキシファイルを設定する方法

Angular開発時にフロントエンドがAngularでAPIがJavaだったりするとそれぞれローカル開発環境が異なると思います。

Angular : http://localhost:4200/

java: http://localhost:8080/

こんな感じで開発することになるかと思います。

これだとポートが異なるためオリジンが違うので、クロスドメイン通信が出来ません。

こういう場合は、Angular CLIでCORSを有効にする必要があります。(じゃないとローカル環境で開発出来ません)

ng serve --help

上記コマンドでオプションの一覧が表示されます。CORSを有効にするには--proxy-configオプションを使用します。

ng serve --proxy-config=a.json

package.jsonと同じ位置にa.jsonファイルを置きます。(ファイル名はなんでもよいです)

ファイルは以下のようにします。

{
  "/app/local": {
    "target": "http://localhost:8080"
  }
}

これで、app/localにリクエストがきた場合にtargetで指定したオリジンにフォワードすることができます。

先にサーバサイドを起動してから、ng serveすればOKです。

コメント

株式会社CONFRAGE ITソリューション事業部をもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む

タイトルとURLをコピーしました