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が問題なのでなんとかして防がないといけない。
- API側のエンドポイントからtrailing slashを除去
- フロントからアクセスするURLにtrailing slashをつける
APIはできるだけ変えたくなかったので今回は2を選択したが、APIを利用するサービスが多い場合はAPI側を変更したほうが楽そう。