Next.js 13跨域问题：从另一Next.js应用发起POST请求失败

你的问题核心是浏览器发送的OPTIONS预检请求没有得到正确的CORS响应。虽然你在POST接口里加了CORS头，但浏览器在发送POST请求前会先发起OPTIONS请求验证权限，而你的路由只实现了POST方法，导致OPTIONS请求返回的响应没有CORS头，触发跨域错误。

方案一：在单个API路由中处理OPTIONS请求 #

修改/app/api/cors-test/route.ts，添加OPTIONS方法的处理逻辑：

export async function POST(request: Request) {
  return new Response("Hello, Next.js!", {
    status: 200,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
      "Access-Control-Allow-Headers": "Content-Type, Authorization",
    },
  });
}

// 处理浏览器的OPTIONS预检请求
export async function OPTIONS() {
  return new Response(null, {
    status: 200,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
      "Access-Control-Allow-Headers": "Content-Type, Authorization",
    },
  });
}

方案二：全局统一配置CORS（适合多API路由场景） #

如果你的项目有多个API路由需要处理跨域，推荐用Next.js的Middleware统一配置，避免重复代码。在项目根目录创建middleware.ts文件：

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

export function middleware(request: NextRequest) {
  // 仅对API路由应用CORS规则
  if (request.nextUrl.pathname.startsWith('/api/')) {
    const responseHeaders = new Headers();
    responseHeaders.set('Access-Control-Allow-Origin', '*');
    responseHeaders.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    responseHeaders.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');

    // 直接响应OPTIONS预检请求
    if (request.method === 'OPTIONS') {
      return new NextResponse(null, { status: 200, headers: responseHeaders });
    }

    // 对其他请求附加CORS头
    const response = NextResponse.next();
    response.headers.set('Access-Control-Allow-Origin', '*');
    response.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    return response;
  }

  return NextResponse.next();
}

// 指定匹配所有API路由
export const config = {
  matcher: '/api/:path*',
};

额外注意事项 #

1. 生产环境安全建议：不要用*允许所有源，最好指定具体的域名，比如"http://localhost:3001, https://your-production-domain.com"
2. 检查请求地址：你的错误信息里请求的是/api/test，但实际路由是/api/cors-test，确认前端请求地址是否正确，避免因路径错误导致的问题
3. 部署缓存问题：在Vercel部署后，可能存在缓存旧代码的情况，建议重新触发一次部署确保新配置生效

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