👌
FastAPIが謎に307リダイレクトするのでCORSエラーが発生する件
概要
上記チュートリアルを参照してFastAPIを使った認証を作ってまして、そこからフロントをNext.jsとしてログインの仕組みを作ってみることにしました。
また自分用にセットアップしている環境を使っていて、ssl可も同時に行っていました。
login:1 Access to fetch at 'http://localhost/api/users/me/' (redirected from 'https://localhost/api/users/me') from origin 'https://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
その結果CORS系のエラーが出ていました。
同一ドメイン内にapiを置く実装をしていたため、CORSは起きないはずなのですが、どうやらhttpsからhttpに307リダイレクトが発生しており、その結果プロトコルが異なることでCORSエラーが発生してしまっていたようでした。
上記画像1枚目は307リダイレクトしている通信で、2枚目がリダイレクト後のものです。
『net::ERR_FAILED 301』
というエラーメッセージも出ており、おそらくcors特有の処理で301リダイレクトされ落ちている様子でした。
参考：
原因
結論から言えばroute末尾にスラッシュが入っていることが原因でリダイレクトがかかっていたようでした。
上記記事によればフレームワークによって挙動は異なるようですが、少なくともFastAPIはデコレーターで指定したパスどおりじゃないと、locationを返すようです。
自身の環境の構成上、入り口はhttpsになっていますが内部はhttpになっていたため、FastAPIのパスと異なったものを指定するとhttpにリダイレクトしたものが返ってきてしまっていました。
その結果、CORSエラーとなっていたようです。
解決策
- 指定したpath通りでfetchする
- 末尾に?をつける。（どちらでもokになる）
余談ですがFastAPIならCORSの対応もかなり簡単にできるようで、いいなーと思ったりしました。
Discussion