Angular2对接ASP.NET Core登录遇CORS跨域错误求助

这个报错已经说得很直白了——浏览器的同源策略阻止了你的跨域请求：你的前端运行在http://localhost:4200，后端在http://localhost:5000，端口不同就属于不同的源，而你的ASP.NET Core后端没有配置允许这个源的跨域访问，所以浏览器直接拦截了响应，抛出了状态码0的错误。

下面是具体的解决步骤，直接在ASP.NET Core项目里配置CORS即可：

1. 在Startup.cs中添加CORS服务 #

打开项目里的Startup.cs文件，找到ConfigureServices方法，新增CORS策略配置：

public void ConfigureServices(IServiceCollection services)
{
    // 配置CORS策略，允许Angular所在的源访问
    services.AddCors(options =>
    {
        options.AddPolicy("AllowAngularClient",
            policy => policy
                .WithOrigins("http://localhost:4200") // 指定允许的前端源地址
                .AllowAnyHeader() // 允许所有请求头（比如登录请求里的Content-Type）
                .AllowAnyMethod()); // 允许所有HTTP方法（POST/GET等）
    });

    // 保留你原有的其他服务配置，比如控制器服务
    services.AddControllers();
}

2. 启用CORS中间件 #

同样在Startup.cs的Configure方法里，一定要在路由之后、授权之前启用CORS中间件（顺序错了会导致配置不生效）：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseRouting();

    // 启用刚才定义的CORS策略
    app.UseCors("AllowAngularClient");

    app.UseAuthorization();

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

额外提示 #

• 如果之后需要允许多个前端源访问，可以在WithOrigins里用逗号分隔多个地址，比如：WithOrigins("http://localhost:4200", "https://your-production-app.com")
• 开发环境下如果想临时允许所有源（生产环境绝对不要这么做，会有安全风险），可以把WithOrigins替换成AllowAnyOrigin()
• 最后确认下Angular请求的后端地址没有拼写错误，端口要和配置里的localhost:5000完全一致

配置完之后重启ASP.NET Core后端，再测试登录请求，应该就能正常获取Token了。

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