Angular6调用ASP.NET Core WebAPI时POST请求遇CORS错误

看起来你已经做了基础的CORS配置，但还是踩了几个常见的坑，我帮你梳理下可能的原因和解决办法：

1. 调整ConfigureServices中服务注册的顺序 #

你现在是先注册AddMvc()再注册AddCors()，这会导致CORS策略无法被MVC正确加载——因为MVC服务会先初始化，后续的CORS配置无法生效。正确的顺序应该先注册CORS服务，再注册MVC服务：

public void ConfigureServices(IServiceCollection services)
{
    // 先配置CORS策略
    services.AddCors(options => 
    {
        options.AddPolicy("AllowCors", builder => 
        {
            builder.AllowAnyOrigin()
                   .AllowAnyMethod() // 直接允许所有请求方法（包含OPTIONS预检请求）
                   .AllowAnyHeader();
        });
    });

    // 再注册MVC服务
    services.AddMvc();
}

2. 检查路由与参数的匹配问题 #

你的POST方法路由是[HttpPost("{term}")]，把term作为URL路径参数，而Angular请求也是把term拼在URL里。这种情况下，浏览器发送的OPTIONS预检请求会指向同一个带参数的URL，有时候ASP.NET Core的路由系统可能无法正确匹配这个OPTIONS请求，导致CORS报错。

你可以尝试两种调整方式：

方式一：把term改为查询参数 #

控制器代码：

[Route("api/[controller]")]
// 去掉控制器上的[EnableCors]，用全局策略即可
public class SearchController : Controller
{
    [HttpPost]
    public async Task SaveSearch([FromBody]dynamic request, [FromQuery]string term)
    {
        _searchRepository.SaveSearch(term, request);
    }
}

Angular代码：

saveSearch(term: string, res:any) {
    this.http.post(`${this.serviceEndpoint}?term=${term}`, { term: term, origin: res.countryCode, request: res }).subscribe();
}

方式二：把term放到请求Body中 #

控制器代码：

[Route("api/[controller]")]
public class SearchController : Controller
{
    [HttpPost]
    public async Task SaveSearch([FromBody]dynamic request)
    {
        var term = request.term;
        _searchRepository.SaveSearch(term, request);
    }
}

Angular代码：

saveSearch(term: string, res:any) {
    this.http.post(this.serviceEndpoint, { term: term, origin: res.countryCode, request: res }).subscribe();
}

3. 移除重复的CORS配置 #

你既在Startup中全局应用了app.UseCors("AllowCors")，又在控制器上加了[EnableCors("AllowCors")]，虽然理论上不冲突，但重复配置可能导致意外问题，建议只保留全局配置即可。

4. 清除浏览器缓存测试 #

有时候浏览器会缓存之前的CORS响应头，导致新的配置无法立即生效，你可以用浏览器的隐身模式测试，或者清除缓存后重试。

按照上面的步骤调整后，应该就能解决POST请求的CORS报错问题了。

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