307 Temporary Redirectが起こってしまうときの解決策
こんにちは！学生開発チームNineteenの代表をしている古谷洸樹です！
今回は307 Temporary Redirectが起こってしまうときの解決策について記事にしていきます。
背景
HackU 名城大学という1か月のハッカソンに参加中
エンジニアは2人
自分はバックエンドをすべてとフロントエンドを半分ほど担当
バックエンド：FastAPI（Dockerで構築）
フロントエンド：React（Viteで構築）
DB：MySQL
問題
開発中、やけにaxiosでgetしてくるのが遅かったのでログを見てみると以下のように動いていました。
ロードが遅い時は決まって307エラーで一時停止しています。
最初は非同期処理的な問題だと考えていましたが調べてみるとたった一文字が原因でした。
解決策
axios.get('http://localhost:8080/posts/')というコードから以下のようにURLの最後の/を抜くだけで解決しました。
axios.get('http://localhost:8080/posts')これは逆の動きで解決する方もたくさんいると思います。
解説
これはFastAPI側で定義したrouterと自分がaxiosで呼び出すときのURLを一緒にしなければなりません。つまり、自分がFastAPIで
@router.get("/posts", response_model=List[post_schema.Post])としたならaxiosで/は付けないし、逆に付けているならaxiosでも/を付けないといけません。
そうしないとfastapi側が言われたパスに見に行ってみたけどないからリダイレクトを返して探して見つけ出すという処理が入ってきてしまいます。
注意点
これはgetメソッドの話です。postメソッドでは/が無いとエラーを起こしていました。
最後に
自分の備忘録として記事を書いていますが、これが誰かの力になれば幸いです。ここまで読んでいただきありがとうございました。
スキをしてくれると喜びます。
参考
この記事が気に入ったらサポートをしてみませんか？