为何在Angular中调用ASP.NET Core 8.0接口时DELETE请求出现CORS错误？

运行ASP.NET Core 8.0 Web API项目时，GET和POST方法调用正常，但调用DELETE方法时出现以下CORS错误：

alerts:1 从源 'https://angular.mydomain.dom' 访问 'https://api.mydomain.dom/controller/Delete?id=123' 的XMLHttpRequest被CORS策略阻止：请求的资源上不存在'Access-Control-Allow-Origin'标头。

我的Program.cs代码如下：

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.HttpOverrides;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;

var builder = WebApplication.CreateBuilder(args);

// Configuration
var configuration = builder.Configuration;

// Add services to the container.
builder.Services.AddDbContext<ApiDbContext>(opt =>
    opt.UseSqlServer(configuration.GetConnectionString("DbApiConnection"))
       .LogTo(Console.WriteLine, LogLevel.Information));

builder.Services.AddControllers();

builder.Services.AddScoped<ICountryRepository, CountryRepository>();
builder.Services.AddScoped<IUserRepository, UserRepository>();

builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(policy =>
    {
        policy
        .AllowAnyOrigin()
        .AllowAnyMethod()
        .AllowAnyHeader();
    });
});
builder.Services.Configure<ForwardedHeadersOptions>(options =>
{
    options.ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto;
});

var app = builder.Build();

// Configure the HTTP request pipeline.

app.UseHttpsRedirection();
app.UseRouting();
app.UseCors();
app.UseAuthorization();

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

app.Run();

解决方法 #

1. 确认控制器DELETE方法的路由配置 #

确保控制器中的DELETE方法正确标记[HttpDelete]特性，路由与请求URL匹配。例如：

[HttpDelete("Delete")]
public IActionResult Delete(int id)
{
    // 业务逻辑处理
    return Ok();
}

如果路由不匹配，请求无法到达ASP.NET Core的CORS中间件，自然不会返回CORS响应头。

2. 完善反向代理环境下的ForwardedHeaders配置 #

如果API部署在Nginx、IIS等反向代理之后，需要添加代理IP到ForwardedHeaders的信任列表，避免CORS中间件无法正确识别请求源：

builder.Services.Configure<ForwardedHeadersOptions>(options =>
{
    options.ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto;
    // 添加反向代理的实际IP地址，本地测试可填127.0.0.1
    options.KnownProxies.Add(IPAddress.Parse("127.0.0.1"));
});

同时确保反向代理已正确转发X-Forwarded-For和X-Forwarded-Proto请求头。

3. 显式指定允许的前端域名 #

虽然AllowAnyOrigin()支持所有源，但部分场景下存在兼容性问题，尝试直接指定前端域名：

builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(policy =>
    {
        policy.WithOrigins("https://angular.mydomain.dom")
              .AllowAnyMethod()
              .AllowAnyHeader();
    });
});

注意：WithOrigins不支持通配符，需填写完整的前端域名。

4. 检查服务器额外配置冲突 #

若部署在IIS上，确认web.config中没有重复配置CORS规则，避免与ASP.NET Core的CORS中间件冲突。如果IIS安装了CORS模块，可尝试禁用该模块，让ASP.NET Core自行处理CORS。

5. 验证预检请求响应 #

用浏览器开发者工具查看DELETE请求的预检OPTIONS请求，确认响应头包含Access-Control-Allow-Origin、Access-Control-Allow-Methods等CORS相关字段。如果OPTIONS请求返回错误，说明CORS中间件未处理该请求，需检查路由或中间件顺序是否正确。

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