如何在Vercel上为Next.js 14的API端点启用CORS？

问题分析 #

本地运行时跨域请求正常，但部署到Vercel后出错，核心原因是Vercel的边缘运行时对原生Response的头处理逻辑和本地环境存在差异，默认配置可能覆盖了自定义设置的CORS头。

解决方案1：修改API路由的响应创建方式 #

将POST方法中的原生Response替换为Next.js提供的NextResponse，确保CORS头在Vercel环境下正确生效：

import { NextResponse } from "next/server";
import path from "path";
import { promises as fs } from "fs";

export async function POST(req: Request) {
  // 改用NextResponse创建响应，替代原生Response
  const response = NextResponse.json({ data: "test" }, { status: 200 });
  response.headers.set("Access-Control-Allow-Origin", "*");
  response.headers.set("Access-Control-Allow-Methods", "*");
  response.headers.set("Access-Control-Allow-Headers", "*");
  return response;
}

export async function OPTIONS(request: Request) {
  const response = new NextResponse(null, {
    status: 200,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "*",
      "Access-Control-Allow-Headers": "*",
    },
  });

  return response;
}

解决方案2：全局中间件统一处理CORS（更推荐） #

在项目根目录创建middleware.ts文件，为所有API路由统一配置CORS规则，避免每个路由重复编写逻辑：

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const response = NextResponse.next();

  // 为所有请求设置基础CORS头
  response.headers.set('Access-Control-Allow-Origin', '*');
  response.headers.set('Access-Control-Allow-Methods', '*');
  response.headers.set('Access-Control-Allow-Headers', '*');

  // 单独处理OPTIONS预检请求，返回204状态更符合规范
  if (request.method === 'OPTIONS') {
    return new NextResponse(null, {
      status: 204,
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': '*',
        'Access-Control-Allow-Headers': '*',
      },
    });
  }

  return response;
}

// 指定中间件作用于所有API路由
export const config = {
  matcher: '/api/:path*',
};

验证步骤 #

1. 修改代码后重新部署到Vercel
2. 从外部域名发起API请求，检查跨域错误是否消失

内容的提问来源于stack exchange，提问作者SERG