Cosnomi

プログラミングをする医学生。物を作ること、自動化すること、今まで知らなかったことを知ることが好き。TypeScript書いたり、Pythonで機械学習したりなど。

Twitter / GitHub / Keybase
TOP >

Response for preflight is invalid (redirect)

axios(HTTPリクエストを送るライブラリ)で自作サービスのAPIを叩いたところ、ブラウザ側でタイトルのように Response for preflight is invalid (redirect) というエラーが発生。

他のエンドポイントについては問題ないので、一見SOPの問題ではないように見えるが、メッセージ内容は明らかにpreflightに問題があるというエラーメッセージ。

tl;dr

結論としては、trailing slash(URL末尾のスラッシュ)の有無に起因する問題だった。フロント側でtrailing slashをつけてアクセスすることで解決した。

原因

原因を詳しく考えてみる。まず、今回の環境は、APIをFlaskで実装、フロントからはaxiosでアクセスというもので、Flaskのtrailing slashの扱いについては次の記事で紹介した。

https://blog.cosnomi.com/archives/475

今回のエンドポイントの設定はそれぞれ次のようになっていた。

  • API側(Flask): /users/
  • フロント側(axios): /user

Flaskはあるエンドポイントをtrailing slashありで設定したとき、trailing slashなしのURLをありのURLに302リダイレクトする。通常であれば、これによってユーザーはtrailing slashの有無を意識せずに済む。

しかし、今回は CORS が絡んでくる(解説記事)

preflight requestを飛ばしたが、redirectが発生したため、セキュリティ上の理由によりアクセスを中断したと推測される。いずれにせよ、このredirectが問題なのでなんとかして防がないといけない。

  1. API側のエンドポイントからtrailing slashを除去
  2. フロントからアクセスするURLにtrailing slashをつける

APIはできるだけ変えたくなかったので今回は2を選択したが、APIを利用するサービスが多い場合はAPI側を変更したほうが楽そう。


最後まで読んでいただきありがとうございます。コメントフォームは設置していません。訂正・意見・感想などはTwitter(@cosnomi)などへお願いします。
記事一覧へ