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です。

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^

コメント