Angularアプリ開発の同一オリジンポリシーエラー対策 〜 CORS(オリジン間リソース共有)できるプロキシールートを設定する

            $ tree -I node_modules -L 1
.
├── README.md
├── angular.json
├── browserslist
├── package.json
├── proxy.conf.json
├── src
└── tsconfig.json

        

            {
    "/hoge/*": {
        "target": "http://localhost:23456",
        "changeOrigin": false,
        "secure": false,
        "logLevel": "debug"
    },
    "/piyo/*": {
        "target": "http://192.168.1.123:54321",
        "secure": false,
        "changeOrigin": true,
        "logLevel": "debug",
        "pathRewrite": {
          "^/piyo": "http://192.168.1.123:54321/dev/v1"
        }
    },
    "/fuga/*": {
        "target": "http://far-remote-guest.co.jp:67890",
        "secure": false,
        "changeOrigin": true,
        "logLevel": "debug",
        "pathRewrite": {
          "^/fuga": "http://far-remote-guest.co.jp:67890/prod/api/v2"
        }
    }
}

        

            [hogeルート]:
    http://local:12345/hoge/(以下のリソースファイル)
        ---> http://localhost:23456/(以下のリソースファイル)

[piyoルート]:
    http://local:12345/piyo/(以下のリソースファイル)
        ---> http://192.168.1.123:54321/dev/v1/(以下のリソースファイル)

[fugaルート]:
    http://local:12345/fuga/(以下のリソースファイル)
        ---> http://far-remote-guest.co.jp:67890/prod/api/v2/(以下のリソースファイル)

        

            //...
{
  "/(プロキシルート名)/*": {
    "target": "(アクセス先の外部ドメイン名)",
    "secure": trueかfalse,
    "pathRewrite": {
      "^/(プロキシルート名)/": "/(置き換えたいルート先)/"
    },
    "changeOrigin": trueかfalse,
    "logLevel": "debug"
  }
}
//...

        

            /(プロキシルート名)/*:
    プロキシルートを現在のドメインで使うためのの便宜上のパスです。
    ページ等でルーティングに使用していないパスなら自由に定義することができます。
    例えば、/hoge/piyo/*や/hoge/piyo/hoge/*など深い階層にすることも可能です。
    ここでの「*」文字はプロキシルートの中にある全てのリソースにマッチすることを意味しています。

target:
    プロキシ接続先のオリジン名を指定します。
    前述したようにオリジン名は基本として、スキーム名＋ホスト名＋ポート番号
    の組み合わせです。

secure:
    プロキシ先のドメインのスキームが暗号化されているかを指定します。
    基本的にhttpならfalse、httpsならtrueを設定します。

logLevel:
    angularでは基本的に開発段階でしか使わないので、debugで良いでしょう。

changeOrigin:
    CORSさせることにおいてはもっとも重要なオプションです。
    プロキシ先のオリジンが別のマシーン環境にあるかを指定します。
    基本的にlocalhost(127.0.0.1)で到達できないオリジンならばtrue、
    localhostなど内部のルーティングテーブルに見えるアドレスならばfalse
    で指定します。

pathRewrite:
    プロキシ接続さきのパスを置き換える際に利用します。
    pathRewriteを使わない場合、例えば現在のドメインオリジンをhttp://localhost:1111、
    接続先のドメインオリジンをhttp://remoteguest:2222とすると、
    http://localhost:1111/(プロキシルート名)/ から http://remoteguest:2222/(プロキシルート名)/
    へとプロキシパス変換されてしまいます。
    このような単純なパスの変換ではREST APIなどの仕組みだと、エンドポイントを柔軟に
    書き換えたいときに不便です。
    そこでpathRewriteを使って適切なエンドポイントとなるようにパスの書き換えを行います。
    この例では、
    http://localhost:1111/(プロキシルート名)/ から http://remoteguest:2222/(置き換えたいルート先)/
    とアクセス先が変更されます。
    なお^記号は正規表現で「パス名の文字列の先頭からマッチ」するという意味です。

        

            {
    //...中略
    "scripts": {
        "ng": "ng",
        "start": "ng serve --port 12345 --proxy-config proxy.conf.json",
        //...以下略

        

            import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
    providedIn: 'root'
})
export class HogeService {

    constructor(private http: HttpClient) { }

    hoge(): Observable<any> {
        return this.http.get('/hoge');
    }

    piyo(): Observable<any> {
        const requestBody: any = { piyo: "piyo" };
        return this.http.post('/piyo', JSON.stringify(requestBody));
    }

    fuga(): Observable<any> {
        return this.http.get('/fuga');
    }

}

        

            $ yarn start