最後のReact教材。Reactはこれだけやれば完了です【2025年6月発売／React 19対応／React初級〜中級者向け】くわしくはコチラ

Next.jsサーバーでCORS問題が起きる時の解決方法

pen-icon 2022.11.14

この記事は約2分で読めます

🟢 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。
🟢『はじめてつくるReactアプリ with TypeScript』、『動かして学ぶ！Next.js/React開発入門（翔泳社／*韓国でも出版）』著者。

▼ Amazon著者ページはこちら
amazon.co.jp/stores/author/B099Z51QF2

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 = nextConfig