【Vercel】【Next.js】CORSエラーが出ないようにする

VercelへNext.js（v13.4.19、App Router）のアプリケーションをデプロイしました。

動作確認をしていくと、Route Handlers周りでCORSエラーが出たので解決していきたいます

エラー文
CORSとは
どう解決するか？？
コード修正
余談
参考記事

エラー文

Access to fetch at 'https://sample-prisma-next-*******-*******.vercel.app/api/user' from origin 'https://sample-prisma-next-app.vercel.app' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Access to fetch at 'https://sample-prisma-next-*******-*******.vercel.app/api/user' from origin 'https://sample-prisma-next-app.vercel.app' has been blocked by CORS policy:

Response to preflight request doesn't pass access control check:

No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

CORSポリシーによってブロックされましたー　と書いてあるので、CORSエラーですね

CORSとは

Cross Origin Resource Sharing (オリジン間リソース共有) のこと。

WEBアプリケーションが異なるオリジンからリソースを引っ張ってくること。

詳しくは↓をご覧ください

なんとなく CORS がわかる...はもう終わりにする。 - Qiita

概要Access to XMLHttpRequest at ' from origin ' has been…

どう解決するか？？

エラー文にあるとおり、APIのレスポンスヘッダにAccess-Control-Allow-Origin を付与します

また、許可するHTTPメソッドとリクエストヘッダを設定するため、

Access-Control-Allow-Methods ：GET、POST、OPTIONSを許可
Access-Control-Allow-Headers ：Content-Typeを許可

も付与します

※許可するメソッドやリクエストヘッダは各自必要なものを設定してください

エラー文を見ると、preflight request でエラーになっています。
CORSの場合、事前にOPTIONSリクエストを送ってみて、安全にリクエストを送れるかテストしています。
これがpreflight requestです。なので、OPTIONSリクエストも許可しておきます

コード修正

next.config.jsでAPIのレスポンスヘッダを設定します

公式ドキュメント

next.config.js Options: headers | Next.js

Add custom HTTP headers to your Next.js app.

こんな感じに設定すればOK

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 全ての API routes にマッチ
  async headers() {
    return [
      {
        // 対象APIのパスパターン
        // 今回は src/app/api/ 配下にAPIを作っているので下記のようにする
        source: "/api/:path*",
        headers: [
          {
            // CORSを許可するオリジン
            key: "Access-Control-Allow-Origin",
            // すべてのオリジンを許可するなら * (アスタリスク)
            // ただセキュリティ的にはよろしくないので注意
            value: "https://sample-prisma-next-app.vercel.app",
          },
          {
            // 許可するメソッド
            key: "Access-Control-Allow-Methods",
            value: "GET,OPTIONS,POST",
          },
          {
            // 許可するリクエストヘッダ
            key: "Access-Control-Allow-Headers",
            value: "Content-Type",
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;