🌟
【Vercel】【Next.js】CORSエラーが出ないようにする
Vercel へ Next.js（v13.4.19、App Router）のアプリケーションをデプロイしました。
動作確認をしていくと、Route Handlers 周りで 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.
CORS ポリシーによってブロックされましたー と書いてあるので、CORS エラーですね
CORS とは
Cross Origin Resource Sharing (オリジン間リソース共有) のこと。
WEB アプリケーションが異なるオリジンからリソースを引っ張ってくること。
詳しくは ↓ をご覧ください
どう解決するか？？
エラー文にあるとおり、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 のレスポンスヘッダを設定します
公式ドキュメント
こんな感じに設定すれば OK
next.config.js
/**@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;
これで無事 CORS エラーが出なくなりました、ひと安心です
余談
next.config.js で設定しなくても、
各 API のレスポンス時にヘッダを付与することでも解決します
参考記事
Discussion