なぜこの記事を書いたか

自分は大学生で都内の会社でインターンをしているのですが、本番環境にデプロイする際に必ずと言っていいほど毎回corsエラーに遭遇し、最終的には「はいまたcorsね」みたいな感じになってました。同じ失敗を二度としないためにも備忘録も兼ねてこの記事を書いています。

webアプリの構成

バックエンド

Laravel

フロントエンド

Vue.js

サーバサイド

Docker, ECS on Fargate, ALB, nginx

データベース

RDS

corsエラーの原因と修正方法

nginxのDockerfileで静的ファイルをLaravelのpublic/buildに置きました。
静的ファイル(フロントのページ)の表示は、Laravelを介さずnginxにより処理されるため、Laravelのconfig/cors.phpでいくらcorsの設定しても意味がなく、nginxの設定ファイルでcorsヘッダを付与しなければならない。
例えば、nginx/default.confに以下を追記しました:

    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'X-Requested-With, Content-Type' always;

まとめ

鬼初歩的な記事で申し訳ないですが、システムの構造をきちんと理解しておくのが重要だと思いました。
すぐにqiitaなどで調べて解決すれば良いですが、そう簡単にいかない場合が多いのでどのページがどこから呼び出されているか、などを意識して自力で解決できるようになりたいものです。