Next.js部署Vercel后与.NET Core API的生产环境CORS问题求助

阿华AIGC实验室

2026-5-11

解决Next.js生产环境与.NET Core API的CORS问题

看起来你遇到的问题很典型——本地开发一切正常，生产环境就触发CORS错误，核心原因通常是后端CORS配置未覆盖生产域名，或者生产环境的HTTPS/代理层干扰了CORS头部。下面是一步步的排查和解决方法：

1. 先检查.NET Core后端的CORS配置（最常见原因）

本地dev正常，大概率是你只给CORS策略加了http://localhost:3000，但没包含生产环境的https://www.example.com。浏览器在HTTPS环境下对CORS的校验更严格，必须精确匹配origin（包括协议、域名、端口）。

修正.NET Core的CORS配置：

在你的Program.cs里，确保CORS策略明确包含生产域名：

var builder = WebApplication.CreateBuilder(args);

// 添加CORS服务
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowFrontend", policy =>
    {
        // 包含本地开发和生产环境的origin
        policy.WithOrigins(
            "http://localhost:3000",
            "https://www.example.com" // 必须加这个！
        )
        .AllowAnyHeader()
        .AllowAnyMethod()
        .AllowCredentials(); // 如果你的请求需要带Cookie/认证信息，必须加这个
    });
});

// 注册其他服务...

var app = builder.Build();

// 注意中间件顺序：CORS必须在路由和控制器之前
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseCors("AllowFrontend"); // 这个位置很关键！要在UseRouting之前
app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();

app.MapControllers();

app.Run();

配置完后，重新部署你的.NET Core API，然后测试生产环境的Next.js。

2. 排查是否有中间件/CDN拦截了OPTIONS预请求

浏览器发送跨域请求前会先发送一个OPTIONS预请求，检查服务器是否允许跨域。如果你的API服务器前面有CDN（比如Cloudflare）、反向代理，或者自定义中间件，可能会拦截这个OPTIONS请求，导致没有返回CORS头部。

CDN配置：确保CDN不会缓存OPTIONS请求，并且允许传递Access-Control-*系列头部。
自定义中间件：检查你的.NET Core项目中是否有自定义中间件在UseCors之前运行，如果有，确保它不会拦截OPTIONS请求，或者在处理完后调用next()让请求到达CORS中间件。

3. 用Next.js API路由做代理（兜底方案）

如果后端CORS配置始终有问题，或者你想彻底避免跨域问题，可以用Next.js的API路由作为代理层——让前端请求同一域名下的Next.js API路由，再由这个路由转发请求到你的.NET Core API。

步骤：

在Next.js项目中创建pages/api/proxy/[...path].js文件，内容如下：

import axios from 'axios';

export default async function handler(req, res) {
    // 获取请求路径
    const { path } = req.query;
    const targetUrl = `https://api.example.com/${path.join('/')}`;

    try {
        // 转发请求到后端API
        const apiResponse = await axios({
            method: req.method,
            url: targetUrl,
            data: req.body,
            headers: {
                // 传递必要的请求头，替换host为后端域名
                ...req.headers,
                host: 'api.example.com',
                'content-type': req.headers['content-type'] || 'application/json',
            },
        });

        // 把后端响应返回给前端
        res.status(apiResponse.status).json(apiResponse.data);
    } catch (error) {
        res.status(error.response?.status || 500).json({
            message: '代理请求失败',
            details: error.response?.data || error.message,
        });
    }
}