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のページに移動する
✤ 筆者 ✤
三好アキ（専門用語なしでプログラミング）
「専門用語なし」のメソッドで1,200人以上のビギナーをフロントエンド開発入門に成功させる。翔泳社『動かして学ぶ！Next.js/React開発入門』（韓国でも出版）など著書25冊以上。Amazonベストセラー1位複数回獲得。
React、Next.js、TypeScriptなどの最新情報や初心者向けコンテンツを、無料メルマガ配信中。メールアドレスだけで登録可 ▶︎ 無料メルマガ登録