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

blog-hero-imgNext.jsのサーバーとは異なるURLからリクエストをした時に起きるCORSを解決するコードを紹介します。

pen-icon2022.11.14

Profile Pic

この記事の筆者:三好アキ(エンジニア)


ウェブデザイナーから『エンジニア』『プログラマー』へ成長したい人、独学で進んでいきたい人を応援しています。 HTMLとCSSの知識だけでアプリ開発を始められる入門書を多数執筆中📕📗👇


ウェブ制作の教本『はじめてつくるReactアプリ』など複数冊を執筆。



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

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

はじめてつくるNext.jsサイト

【最新バージョンのNext.jsとAppフォルダで、時短でNext.jsを習得】

1759円0円

Amazonのページに移動する

この本には続編として、Appフォルダでバックエンドとフロントエンドの両面を開発する『Next.jsでつくるフルスタックアプリ』もあります(2023年12月リリース)。

Next.jsでつくるフルスタックアプリ

【最新バージョンのNext.jsとAppフォルダで、フルスタックアプリを自力で作る力を手にいれる】

1980円0円

Amazonのページに移動する