🤮

Next.js の API Route で cors を許可したのに CORS エラーが消えなかった【小ネタ】

2023/02/08に公開

今回の解決方法

next.config.js で trailingSlash: true を指定しているのに、呼び出し側の URL の末尾に / がなかった。
ただそれだけ…
1時間くらい悩んでました…

詳細

Next.js の API Route に別のドメインのブラウザからアクセスしたくなった時は、呼び出し元の API Route で呼び出し側のドメインを許可してあげる必要があります。

こちらのドキュメントの方法に従えば簡単に許可できます。
https://nextjs-ja-translation-docs.vercel.app/docs/api-routes/api-middlewares#connectexpress-ミドルウェアのサポート

ただ、 next.config.js で trailingSlash: true を指定してる状態で末尾に / なしの URL にアクセスするとリダイレクトが発生するので、 CORS エラーが発生してしまうんですね…

まとめ

今回は個人開発でちょっと詰まったところを誰かの助けになればいいな〜と思って記事にしてみました。

あと、エンジニアの友達が少ないのでエンジニアの方Twitterで友達になってください…

Discussion