Next.jsとSupabaseでGoogleでログインをやっていたのですが、ありえないくらいずっとCORSのエラーが出てできませんでした。
犯人は、とんでもないヤツでした…
o1-mini、頼むわ。(経緯)
エラーが出た当初、Cursorのo1-miniに頼んだりしていました。
o1-miniはいろんな処置を施してくれました。あらゆる箇所にデバッグ用のconsole.logを残してくれたのです。(本当にありがとう)
そして睨みあいすること7時間。(え？)
一つのエラーにたどり着きました。
Access to fetch at 'https://(ふせじ).supabase.co/auth/v1/user' from origin
'http://localhost:3000' has been blocked by CORS policy:
The 'Access-Control-Allow-Origin' header has a value 'https://localhost:3000' that is
not equal to the supplied origin. Have the server send the header with a valid value,
or, if an opaque response serves your needs, set the request's mode to 'no-cors'
to fetch the resource with CORS disabled.ほーん。なぜかローカルホストに対するリクエストがHTTPSになっているせいで、オリジンが変わっちゃってるのね。(ここまで3時間)
Supabaseとか.env.localとかGCPのURL設定してるところ、確認してみてネ！
わし「おけー！(なんだ、すぐ終わりそうだな…)」
(あれ、、、おかしいぞ、どこもちゃんとHTTPになってる…)
ねぇ、o1-mini、そのへんのURLは大丈夫だったよ
は？違うが？お前が間違ってるが？ちゃんと確認しろ？サーバー再起動した？クッキー消してみた？
いや、全部やりましたが……..(4時間経過)…あ、そうだ。
ここで気づきます。手っ取り早くプレーンな環境からアクセスできる、シークレットブラウザがあるじゃないかと。
使っていたEdgeのシークレットブラウザはいろいろ拡張機能とかもオンにしていてプレーンとは言い難かったので、Chromeのシークレットブラウザを利用することにしました。
………あれ？普通にログインできるぞ？？？というか、Chromeだったらシークレットじゃなくてもログインできるぞ？
…….妙だな…HTTPS….HTTP….どこかで聞いたような…….( ﾟдﾟ)ﾊｯ!
これに違いない！！！
HTTPS Everywhere!
うっきうきでオフるわし。
そしてログイン..すると…ログイン、できました….!!!! (o1-miniありがとう)
結論
さて、慣れない茶番劇は終わりです。読み飛ばした懸命な方も多いと思われますので、ここに結論を書きます。
HTTPS Everywhereという拡張機能が原因でした。
これ、いらないところまでHTTPSにしちゃうんですね。(゜゜)
あとこれ、確かEdgeに標準搭載されてたはずなんです。そして、今日は「気分転換にEdgeでも使ってみるか～」と思って、Edgeを特別に使用した日でした。まぁ、真犯人はEdgeじゃなくてHTTPS Everywhereなんですけどね。
GitHubとかStack OverFlowにも同様のエラーを食らって困っている人がたくさんいらっしゃいましたが、あの人達も実は同じ原因だったりするんでしょうか…？
Stack OverFlowはアカウントないからGitHubに行ってきます。
ここまで読んでくださり、ありがとうございました。身に覚えのないCORSエラーの対処法でした。
コメントを残す