axiosなどで「Response for preflight is invalid (redirect)」

シェアする

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

他のエンドポイントについては問題ないので、SOPの問題ではなさそう。とはいえ、preflightに問題があるというエラーメッセージ。よく分からなくなってくる。

スポンサーリンク

解決法

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

原因

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

突然ですが、みなさん! この2つの違いをご存知ですか? 実際にアクセスしてみると表示されるページに違いがない...

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

API側(Flask): /users/

フロント側(axios): /user

Flaskはtrailing slashありに設定したとき、trailing slashなしのURLでアクセスされた場合には302リダイレクトを行う。通常であれば、これによってユーザーはtrailing slashの有無を意識せずに済むようになる。

しかし、今回はCORSが絡んでくる。

前回はSOP(同一生成元ポリシー)について調べて説明しました。 (前回の内容に基づいた記事、いわば続きみたいな感じなのでぜひ目...

preflight requestを飛ばしたが、redirectが発生したため、セキュリティ上の理由によりアクセスを中断したといったところだろうか。

いずれにせよ、このredirectが問題なのでなんとかして防がないといけない。

  1. API側のtrailing slashを取る
  2. フロント側にtrailing slashをつける

APIはできるだけ変えたくなかったので、今回は2を選択した。

普段意識していなかったことなので、気づくまでに時間がかかってしまった。

スポンサーリンク

シェアする

フォローする