Rails(api)×Next.jsの構成でアプリケーションを作っていたら、CORSエラーが出なくて時間がかかってしまったのでその記録です。
状況
- rack-corsを導入してフロントの
localhost:5001を許可することに成功していた - ふとCORSの設定がちゃんとできているのか不安になり、Rails側で許可するoriginから
localhost:5001を外した - しかしCORSエラーが起きない
というものでした。
まだ不慣れなところなのもあり、rack-corsの設定の問題なのかと色々設定を変えてみたりしましたが、解決に至るまでに結構かかってしまいました。
結論
おそらく経路上のどこかで、Access-Control-Allow-Originをキャッシュかなにかしているっぽいです。localだけかもしれませんが。
結論までの道のり
- フロントのポートを
localhost:5002に変更してみたところCORSエラーが発生した - Rails側の許可するoriginを
localhost:5002に変更してリクエストしたところCORSエラーが解消された(localhost:5001は外して) - その後フロントのURLを
localhost:5001に戻してリクエストしてみたところ、ちゃんとCORSエラーが起きた
一度CORSに成功すると、そのフロントとバックの組み合わせでAccess-Control-Allow-Originが残ることで、バックで設定を変えても検証しない、のかな？(DevToolsからレスポンスヘッダーを見ると更新されていませんでした)
なので、フロントの別originから、その別originが許可されるようにリクエストを送ると、そこで更新される、らしい、ですね。多分。
事象から予想したことなので詳しくはよく分かっていないですが、調べても出てきていなかったので、同じことに詰まってしまった方と、なにより自分のための備忘録として書いておきました。
要するに、「ちゃんとCORS効いてんの？」と気になったときはバックの設定を変えて検証するのではなく、フロントの起動portを変えればよかったってことですね。
詳しい方いらしたら、コメントで教えてもらえるとありがたいです。