Angular 2 + ASP.NET Core生产环境出现No 'Access-Control-Allow-Origin'错误求助

首先得搞明白为什么开发环境好好的，一到生产环境就炸了——这其实是开发环境的代理机制在“帮你作弊”，绕开了浏览器的同源检查。

问题根源：开发 vs 生产的跨域差异 #

开发环境下，你大概率用了Angular的proxy.conf.json（或者类似的代理配置），把前端的API请求转发到后端服务器。这时候浏览器看到的请求都是来自同一个域名（比如localhost:4200），自然不会触发CORS校验。

但到了生产环境，前端和后端通常是分开部署的——可能是不同域名、不同端口，甚至不同服务器。这时候浏览器会严格执行同源策略，检查后端返回的响应头里有没有Access-Control-Allow-Origin，如果没有就直接报错。

具体解决方案 #

1. 给ASP.NET Core后端配置正确的CORS策略 #

根据你的.NET版本，在对应的启动文件里配置CORS：

.NET 6+（Program.cs）

var builder = WebApplication.CreateBuilder(args);

// 注册CORS服务，定义允许的生产环境前端域名
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowProductionFrontend", policy =>
    {
        // 替换成你实际的生产前端域名，比如"https://your-app.com"
        policy.WithOrigins("https://your-production-frontend-url")
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials(); // 如果你的请求带Cookie、Auth Token这类凭证，必须加这个
    });
});

// 注册控制器等其他服务
builder.Services.AddControllers();

var app = builder.Build();

// 注意顺序：要在UseRouting之后，UseAuthorization之前启用CORS
app.UseCors("AllowProductionFrontend");

app.UseAuthorization();

app.MapControllers();

app.Run();

.NET 5及更早（Startup.cs）

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddPolicy("AllowProductionFrontend",
            policy => policy.WithOrigins("https://your-production-frontend-url")
                            .AllowAnyHeader()
                            .AllowAnyMethod()
                            .AllowCredentials());
    });

    services.AddControllers();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 其他中间件...

    app.UseCors("AllowProductionFrontend");

    app.UseRouting();
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

2. 确认生产环境前端的API地址配置正确 #

打开Angular的environment.prod.ts，确保API地址指向正确的生产后端地址：

export const environment = {
  production: true,
  apiUrl: 'https://your-backend-domain.com/api' // 别写错了！
};

3. 用反向代理消除跨域（更推荐的生产方案） #

如果可以的话，用Nginx或者IIS这类反向代理把前端和后端的请求统一到同一个域名下，从根源上避免跨域问题。比如Nginx配置：

server {
    listen 80;
    server_name your-domain.com;

    # 处理前端静态文件
    location / {
        root /usr/share/nginx/html; # 你的Angular打包后的dist目录路径
        try_files $uri $uri/ /index.html;
    }

    # 转发API请求到后端
    location /api {
        proxy_pass http://localhost:5000; # 后端服务的地址
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $remote_addr;
    }
}

这样前端请求/api/print-pdf时，Nginx会转发到后端，浏览器看到的是同一个域名的请求，完全不会触发CORS检查。

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