ローカル環境でクロスドメイン状態を作る方法を記録しておきます。
目次
なぜクロスドメイン状態をローカルで作りたかったか
本番環境に近い状態を一時的に作りたかったからです。
本番環境ではフロントとバックエンドが異なるドメインで動いていました。しかし、ローカル環境ではフロントもバックエンドも同じドメイン、localhostで動いてました。
その結果、ローカル環境と本番環境で、通信時のCORS周りの挙動が異なっていました。
前提
- CORSの設定は済んでおり、ローカル環境でのフロント・バックエンド間の通信は既にできている
方針
フロントを127.0.0.1、バックエンドをlocalhostで動かします。
そうすることで、異なるドメイン間の通信を再現することができます。
バックエンド側で行うこと
バックエンドはlocalhostで動きますが、いくつか準備することがあります。
SSL化（https化）する
バックエンド側をSSL化（https化）します。
クロスドメイン通信時、通信先がhttpではCookieの共有が行われないからです。
Dockerを利用してバックエンドを起動している場合
https-portalというイメージを利用すれば簡単にできます。docker-compose.yamlに以下コンテナを追加すればOKです。
https-portal:
image: steveltn/https-portal:1
ports:
- '8043:443' # https://localhost:8043で立ち上がります
environment:
STAGE: local
DOMAINS: 'localhost -> http://host.docker.internal:8080' # https://localhost:8043をhttp://localhost:8080（実際にバックエンドが立ち上がっているポート）に接続します127.0.0.1をCORSの許可オリジンに追加する
Access-Control-Allow-Originに該当する設定が、バックエンド側コードに存在するかと思います。
そこにフロント側が動くオリジン（例: http://127.0.0.1:3000）を追加します。
フロント側で行うこと
バックエンドと通信するエンドポイント変更
https化したエンドポイントに変更してください。
実際に動かしてみる
フロント側はlocalhostではなく、http://127.0.0.1:3000など127.0.0.1にアクセスしてください。
