【Angular】ローカルのAPI通信の際にプロキシでCORS対策

概要

AngularのHttpClientで通信するときに、対策なしにオリジンの異なるAPI通信を行おうとするとCORSエラーが出ます。この事象の方法についてまとめます。

• 例）Angularポート(4200）からBackend(8080)にアクセスしようとした時のCORSエラー
  

解決方法

• proxy.conf.json

{
  "/api": {
    "target": "http://127.0.0.1:8080/test",
    "secure": false
  }
}

• package.json

  "scripts": {
    "start": "ng serve --proxy-config proxy.conf.json",
  },

• angular.json

{
  ...
  "architect": {
    "serve": {
      "options": {
        "proxyConfig": "proxy.conf.json"
      },
   }
   ...
*

ng serveで、このように--proxy-configオプションを指定すると、ng serveで立ち上げたサーバーがproxy.conf.jsonの設定内容に基づくプロキシサーバとしても機能するようになります。

上記の例だと、Angular内で/apiにAPIを投げると、http://127.0.0.1:8080/testにリダイレクトされます。

例えば、

this.http.post('/api/hoge', data).subscribe(...);

のように書くと、実際にはhttp://127.0.0.1:8080/test/hogeにリクエストが転送されます。

プロキシを噛ませることで、ブラウザから見ると同一オリジンへのアクセスとなる（アプリ:4200→プロキシ:4200）とため、CORSエラーが起こらなくなります。

ちなみに、proxy.conf.jsonのtarget部分は最初localhostとしてうまく動かなかったのですが、127.0.0.1にすると解決しました。