ローカルでAngular＆Javaのアプリケーションを起動するためのプロキシ設定

Angular のローカル開発 (ng serve) は、デフォルトで http://localhost:4200 で起動します。

一方、バックエンド（Java/Spring Boot など）は http://localhost:8080 など別ポートで動作していることが多いです。

このとき、フロントから直接 http://localhost:8080/api/... にアクセスすると CORS (Cross-Origin Resource Sharing) の制約でエラーになります。

そこで proxy.conf.json を使い、Angular 開発サーバー（:4200）が あたかも同じオリジンで通信しているように バックエンドにリクエストを転送してくれます。

proxy.conf.jsonの設定

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

各プロパティの意味

基本的な設定は最初の2つ、パスとtarget。その他は必要に応じて設定する。

“/api”

Angular 側でアクセスするパスのプレフィックス。

つまり、この設定は、以下のURLでアクセスされることを想定している。

http://localhost:4200/api/...

“target”: “http://localhost:8080”

実際にリクエストを転送する先（Java サーバー）のエンドポイント。

“secure”: false

HTTPS の証明書を無視するかどうか。ローカル開発では false にすることが多い。

“changeOrigin”: true

HTTPリクエストヘッダーにはHostというパラメータがあるが、これを書き換えるかどうか。

この設定をしないと、Javaにリクエストが送られる際、リクエストヘッダーに、書き換えられる前のURLである以下のパラメータが残る。

Host: localhost:4200

“logLevel”: “debug”

転送時のログレベル。デバッグ用。

proxy.conf.jsonを読み込む

angular.jsonのprojects.app-name.architect.serve.optionsに、先ほど作成したproxy.conf.jsonを読み込む設定を追加する。

"proxyConfig": "src/proxy.conf.json"

rootの設定にもよるかと思いますが、src/は不要になるかもしれません。

まとめ

proxy.conf.json は、Angular 開発環境で CORS を回避しつつ Java サーバーへ通信を中継するための設定ファイルです。

本番環境では不要ですが、ローカル開発を快適にするためにほぼ必須の設定です。