使用fetch调用ASP.NET Core Web API时触发CSP错误的解决方法

问题核心 #

错误提示的default-src 'none'是执行fetch时所在的浏览器页面的内容安全策略（CSP），而非API服务端返回的约束。因为API返回的是纯JSON数据，不会附带CSP头（除非手动配置）；而curl调用不受浏览器CSP规则限制，因此能正常请求。

解决方案 #

方案1：在允许的页面执行fetch #

直接访问API接口页面（如http://localhost:5116/weatherforecast，浏览器会渲染JSON视图），在该页面的控制台执行fetch命令。此时页面的CSP为浏览器默认策略（或API返回的宽松规则），不会限制同域请求。

方案2：调整API的CSP中间件位置 #

之前添加的CSP配置可能因中间件顺序错误未生效，需将其放在路由中间件之后、端点中间件之前，同时移除可能存在的冲突头：

var builder = WebApplication.CreateBuilder(args);

// 添加CORS配置（保留原有逻辑）
builder.Services.AddCors(options => options.AddDefaultPolicy(builder =>
{
    builder.AllowAnyOrigin()
           .AllowAnyMethod()
           .AllowAnyHeader();
}));

builder.Services.AddControllers();
var app = builder.Build();

app.UseRouting();

// 正确位置添加CSP中间件
app.Use(async (context, next) =>
{
    // 移除可能存在的CSP头，避免冲突
    context.Response.Headers.Remove("Content-Security-Policy");
    // 配置允许同域请求的CSP规则
    context.Response.Headers.Add("Content-Security-Policy", "default-src 'self'; connect-src 'self';");
    await next();
});

app.UseCors();
app.UseAuthorization();

app.MapControllers();

app.Run();

方案3：调试时临时关闭浏览器CSP（仅本地开发用） #

在Chrome中可通过启动参数关闭CSP：

chrome.exe --disable-content-security-policy

注意：此方法仅用于本地调试，生产环境严禁使用。

补充：Swagger页面执行fetch的特殊处理 #

如果是在Swagger页面执行fetch，需调整Swagger的CSP配置：

app.UseSwagger();
app.UseSwaggerUI(options =>
{
    options.Headers.Add("Content-Security-Policy", "default-src 'self'; connect-src 'self';");
});

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