Angularのリバースプロキシの設定

設定する上で公式ドキュメントが大いに参考になります。

#Angularのリバースプロキシを設定していく

サーバーサイドとクライアントサイドを別々のlocalhostで立ち上げるとポート番号が異なります。
例)
クライアントサイド : http://localhost:4200
サーバーサイド : http://localhost:8080

異なるポートからのアクセスはCORSエラーとなり拒否されます。
そこでローカルで開発する場合は、リバースプロキシを設定しクライアントサイドからの特定のURLをサーバーサイドに合わせることで(書き換えることで)回避できます。

##proxy.conf.jsonの作成
proxy.conf.json ファイルを、 package.json と同じディレクトリにある src/ フォルダの中に作成します。
src/
├app
├assets
├この中<---
ターミナルからなら以下のコマンドで作成できます。

touch proxy.conf.json

proxy.conf.jsonには以下の内容を記述します。

{
  "/app": {
    "target": "http://localhost:8080",
    "secure": false,
    "pathRewrite": {
      "^/app": ""
    },
    "logLevel": "debug"
  }
}

内容はlocalhot:4200/app/*にきたアクセスは全てlocalhost:8080/*となります。
分かりやすいように例を出します。
localhost:4200/app/api/loginが要求されるとプロキシ設定により
localhost:8080/api/loginに書き換えられ、サーバーに飛んでいきます。

##CLI設定ファイルの変更
CLI設定ファイルangular.jsonの中で, serveターゲットにproxyConfigオプションを追加します

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json" //ここに追加
    },

##ローカルサーバーの起動
あとは通常通りサーバーサイドとクライアントサイドのローカルサーバーを立ち上げます。
今回自分はGo/Echoを使っているので以下になります.

go run main.go

ng serve --open

##参考資料
Angular公式ドキュメント