Next.jsサーバーでCORS問題が起きる時の解決方法
2022.11.14
この記事は約2分で読めます
目次
筆者：三好アキ
▶︎ 三好アキの著書一覧はこちら
Next.jsサーバーとCORS
Next.jsにコードを書いてVercelにデプロイすると簡単にサーバー機能を実現できるので、非常に便利です。
ここでNext.jsをフロントエンドとバックエンド両方に使っている場合、URLが同じなので特に問題は起きないですが、もしURLが別のフロントエンドからリクエストをする場合にはCORSの問題が起きます。
この解決のためには、下記のようにheadersに関する設定をnext.config.jsに追加してデプロイしましょう（ここではVercelへのデプロイを想定）。
// next.config.js
const nextConfig = {
reactStrictMode: true,
// ⬇追加
async headers() {
return [
{
"source": "/(.*)",
"headers": [
{ "key": "Access-Control-Allow-Credentials", "value": "true" },
{ "key": "Access-Control-Allow-Origin", "value": "*" },
{ "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT" },
{ "key": "Access-Control-Allow-Headers", "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" }
]
}
]
},
// ⬆追加
}
module.exports = nextConfigNext.jsバージョン13で導入されたAppフォルダを使った最新のNext.js開発に興味のある方は、2023年6月にリリースした下記書籍を参考にしてください。
はじめてつくるNext.jsサイト
【最新バージョンのNext.jsとAppフォルダで、時短でNext.jsを習得。作りながら学ぶ実践形式】
Amazonのページに移動する
この本には続編として、Appフォルダでバックエンドとフロントエンドの両面を開発する『Next.jsでつくるフルスタックアプリ』もあります（2023年12月リリース）。
Next.jsでつくるフルスタックアプリ
【最新バージョンのNext.jsとAppフォルダで、フルスタックアプリを自力で作る力を手にいれる】
Amazonのページに移動する
🟩 フロントエンド開発者入門ガイド【無料配布中】
最初にこれが知りたかった！
フロントエンド初心者が必ず押さえておきたい ― 『挫折しない勉強法』とその具体的ステップ、無料配布中。
（*名前不要・メールアドレスだけで受け取り可能です）
関連記事
