Angular调用ASP.NET Core后端出现CORS跨域问题求助

错误信息 #

Access to XMLHttpRequest at 'https://localhost:7289/cv/generate' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

问题详情 #

• Angular应用运行在 http://localhost:4200
• ASP.NET Core后端接口：https://localhost:7289/cv/generate 和 https://localhost:7289/personalinfo
• 预检请求响应缺少 Access-Control-Allow-Origin 头，触发CORS拦截

已尝试操作 #

• 检查后端CORS配置
• 确认HTTP方法权限
• 验证Angular请求头
• 查阅官方CORS配置文档

问题分析与解决方案 #

1. 修复CORS策略名称不匹配 #

你的ASP.NET Core服务配置了名为AllowAngularDev的CORS策略，但CVController上使用的是[EnableCors("AllowAll")]——这个策略根本不存在，导致CORS规则未生效。

修改控制器代码：
把CVController上的注解改成和配置一致的策略名：

[Route("api/[controller]")]
[ApiController]
[EnableCors("AllowAngularDev")] // 替换原有的"AllowAll"
public class CvController : ControllerBase
{
    // ... 控制器内容不变
}

如果PersonalInfo控制器也加了[EnableCors]注解，同样要改成"AllowAngularDev"。

2. 确保中间件顺序正确 #

ASP.NET Core中间件的执行顺序直接影响CORS生效与否，UseCors必须放在UseRouting之后、UseAuthorization之前。

正确的Program.cs中间件顺序示例：

var builder = WebApplication.CreateBuilder(args);

// 添加服务
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngularDev",
        builder =>
        {
            builder
                .WithOrigins("http://localhost:4200")
                .AllowAnyHeader()
                .AllowAnyMethod();
        });
});
builder.Services.AddControllers();

var app = builder.Build();

// 中间件顺序
app.UseHttpsRedirection();
app.UseRouting(); // 先路由
app.UseCors("AllowAngularDev"); // 然后CORS
app.UseAuthorization(); // 再授权
app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
});

app.Run();

3. 修正路由不匹配问题 #

你提到的请求地址是https://localhost:7289/cv/generate，但CVController的路由是[Route("api/[controller]")]，且Post方法没有指定额外路由，实际接口地址应为https://localhost:7289/api/Cv，这会导致请求404，间接引发CORS错误（因为预检请求返回404，浏览器判定CORS不通过）。

修改控制器的Post方法路由：

[HttpPost("generate")] // 添加此路由，使接口地址变为/api/Cv/generate
public IActionResult Post([FromBody] CV cv)
{
    // ... 方法内容不变
}

同时确保Angular服务中environment.apiUrl设置为https://localhost:7289/api，这样请求地址会自动拼接成https://localhost:7289/api/Cv/generate，和后端路由匹配。

4. 全局启用CORS（可选） #

如果不想给每个控制器添加[EnableCors]注解，可以直接在端点配置中全局应用策略：

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

这样所有控制器都会自动应用AllowAngularDev策略，无需再单独加注解。

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