ちょっと変わった構成で、このようになっている。
フロント用CloudFront + S3 → front.example.com
バック用CloudFront + ALB + EKS → back.example.com
あと、フロントからバックのAPIをたたくために、x-api-keyをヘッダにセットしている。
フロントからバックへアクセスする際に、CORSエラーが出て１日中ハマりました。
忘れそうなので、確認ポイントをメモ。
・まず、CORSエラーを出しているのはバック側なので、フロント側の設定は無視でよいはず。
ただ、Access-Control-Request-Credentialsがバックエンド側で有効である場合は、フロント側ではwith_redentialsをセットしてあげる必要がある。(axiosだと)
・バックのCloudFrontでは、以下のヘッダをCloudFront配下のリソースにも渡すように設定する
ちなみに、x-api-keyを含める必要があったので、Lagacyの方で設定したけど、用意されているヘッダで事足りるのであればマネージドの設定セットがあるのでそちらを使う方がいいかもしれない。
・OPTIONSメソッドは有効化しないといけない（プリフライトリクエストはOPTIONSでリクエストされる）
また、WAFも併せて有効にしている場合は、次のようなルールを作っておく。
OPTIONメソッドと想定されるORIGINをALLOW
X-API-KEYが指定しているものでなければBLOCK
（これでたぶん大丈夫なはず）
参考