11/3/2018, 1:19 AM GMT+9

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側を変更したほうが楽そう。


Cosnomi
Cosnomi

コンピュータ(Web, 機械学習など)が好きな医学部生

Twitter / GitHub