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

Next.jsサーバーとCORS

Next.jsにコードを書いてVercelにデプロイすると簡単にサーバー機能を実現できるので、非常に便利です。

ここでNext.jsをフロントエンドとバックエンド両方に使っている場合、URLが同じなので特に問題は起きないですが、もしURLが別のフロントエンドからリクエストをする場合にはCORSの問題が起きます。

この解決のためには、next.config.jsにheadersの設定を下のように追加してデプロイします（ここでは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

Next.jsバージョン13で導入されたAppフォルダを使った最新のNext.js開発に興味のある方は、今月（2023年6月）リリースした下記書籍を参考にしてください。