株式会社ヴァンデミックシステム

Blog

<スポンサーリンク>

ちょっと変わった構成で、このようになっている。

フロント用CloudFront + S3 → front.example.com
バック用CloudFront + ALB + EKS → back.example.com
あと、フロントからバックのAPIをたたくために、x-api-keyをヘッダにセットしている。

フロントからバックへアクセスする際に、CORSエラーが出て1日中ハマりました。
忘れそうなので、確認ポイントをメモ。
・まず、CORSエラーを出しているのはバック側なので、フロント側の設定は無視でよいはず。
 ただ、Access-Control-Request-Credentialsがバックエンド側で有効である場合は、フロント側ではwith_redentialsをセットしてあげる必要がある。(axiosだと)
・バックのCloudFrontでは、以下のヘッダをCloudFront配下のリソースにも渡すように設定する

ちなみに、x-api-keyを含める必要があったので、Lagacyの方で設定したけど、用意されているヘッダで事足りるのであればマネージドの設定セットがあるのでそちらを使う方がいいかもしれない。

・OPTIONSメソッドは有効化しないといけない(プリフライトリクエストはOPTIONSでリクエストされる)

また、WAFも併せて有効にしている場合は、次のようなルールを作っておく。
OPTIONメソッドと想定されるORIGINをALLOW

X-API-KEYが指定しているものでなければBLOCK

(これでたぶん大丈夫なはず)

参考

<スポンサーリンク>

コメントを残す

Allowed tags:  you may use these HTML tags and attributes: <a href="">, <strong>, <em>, <h1>, <h2>, <h3>
Please note:  all comments go through moderation.

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)