Next.jsサーバーでCORS問題が起きる時の解決方法
2022.11.14
この記事は約2分で読めます
目次
この記事の筆者：三好アキ
🔹 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。
🔹 Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』著者。
Amazon著者ページはこちら → amazon.co.jp/stores/author/B099Z51QF2
React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて無料配信中。登録はこちらから → 無料メルマガ登録
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を習得。作りながら学ぶ実践形式】
1848円 → 0円
Amazonのページに移動する
この本には続編として、Appフォルダでバックエンドとフロントエンドの両面を開発する『Next.jsでつくるフルスタックアプリ』もあります（2023年12月リリース）。
Next.jsでつくるフルスタックアプリ
【最新バージョンのNext.jsとAppフォルダで、フルスタックアプリを自力で作る力を手にいれる】
1980円 → 0円
Amazonのページに移動する
メルマガ配信中
（from 三好アキ／エンジニア）
React、Next.js、TypeScriptなど最新のウェブ開発のお役立ち情報を、ビギナー向けにかみ砕いて無料配信中。
（*配信はいつでも停止できます）
関連記事
