如何解决Next.js 13部署到Vercel后的CORS错误？

问题原因 #

本地开发时Next.js开发服务器会自动处理跨域代理逻辑，同时浏览器对本地请求的跨域限制更宽松，因此不会触发CORS错误。部署到Vercel后，前端直接请求第三方API会触发浏览器同源策略限制；若你的API路由未配置正确的跨域响应头，也会导致CORS问题。

解决方案 #

1. 让前端通过API路由转发请求

禁止前端直接请求process.env.URL对应的第三方API，改为请求Vercel部署后的/movies路由，由该路由作为中间层请求第三方API。前端与你的API路由属于同一域名，不会触发同源策略限制，这是最直接的解决方式。

2. 给API路由添加CORS响应头

若需要/movies路由支持跨域访问（比如有其他域名的客户端请求它），可在返回响应时添加CORS相关HTTP头，同时修正代码中Response与NextResponse混用的问题：

import { NextResponse } from "next/server";
import axios from "axios";

export async function GET(req) {
  try {
    const res = await axios({
      url: process.env.URL,
    });
    return NextResponse.json(
      { data: res.data },
      {
        status: 200,
        headers: {
          // 生产环境建议指定具体前端域名，如"https://your-vercel-domain.vercel.app"，而非通配符*
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
          "Access-Control-Allow-Headers": "Content-Type, Authorization",
        },
      }
    );
  } catch (err) {
    console.log(err);
    return NextResponse.json(
      { error: err.message },
      {
        status: 500,
        headers: {
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
          "Access-Control-Allow-Headers": "Content-Type, Authorization",
        },
      }
    );
  }
}

3. 处理OPTIONS预检请求

浏览器发送跨域请求前会先发送OPTIONS预检请求验证权限，因此需给API路由添加OPTIONS方法处理：

export async function OPTIONS(req) {
  return NextResponse.json(
    {},
    {
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
        "Access-Control-Allow-Headers": "Content-Type, Authorization",
      },
    }
  );
}

注意事项 #

• 生产环境尽量避免使用"Access-Control-Allow-Origin": "*"，指定具体允许的域名能提升安全性。
• 确认process.env.URL已在Vercel平台正确配置，避免因环境变量缺失导致请求失败。

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