ASP.NET Core静态文件CORS错误？React调用wwwroot内文件报错

ASP.NET Core 3.1的中间件是按注册顺序串行执行的，你目前的CORS配置对接口生效，是因为接口请求会经过端点路由、被对应控制器的逻辑处理，自动关联上你定义的CORS策略；但静态文件的请求一旦被提前触发的静态文件中间件拦截、直接返回文件内容，就完全绕开了CORS头的注入逻辑，哪怕CORS规则配的再完善，前端也会因为收不到跨域允许的响应头报CORS错误。

1. 优先调整中间件执行顺序（90%的场景是这个问题） #

必须保证UseCors的执行顺序早于UseStaticFiles，正确的Configure方法管道顺序参考如下：

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

    app.UseRouting();

    // CORS中间件必须放在静态文件、授权、端点映射之前
    app.UseCors("你预先定义的跨域策略名称");

    // 静态文件中间件放在CORS之后，此时请求会先经过CORS头注入再返回文件内容
    app.UseStaticFiles();

    app.UseAuthorization();

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

注意：如果之前把UseStaticFiles写在UseCors前面，静态文件请求会被直接短路由返回，完全绕开CORS中间件的处理，这也是为什么接口正常但静态文件报跨域的核心原因。

2. 调整静态文件中间件的响应头配置 #

如果调整顺序后问题仍存在，是因为默认静态文件中间件不会主动给响应附加CORS头，需要在静态文件配置中手动注入跨域响应头：

app.UseStaticFiles(new StaticFileOptions
{
    OnPrepareResponse = ctx =>
    {
        // 配置为React前端实际访问的地址，和你之前CORS策略的允许来源保持一致
        ctx.Context.Response.Headers.Append("Access-Control-Allow-Origin", "http://你的React前端地址");
        // 如果前端请求带了Cookie/凭证，需要补充这个头
        ctx.Context.Response.Headers.Append("Access-Control-Allow-Credentials", "true");
    }
});

3. 排查授权规则的干扰 #

如果全局配置了接口授权规则，静态文件路径未开放匿名访问时，前端发起的CORS预检（OPTIONS）请求会直接返回401状态，这类报错也会被前端识别为跨域错误。这种情况需要给静态文件路径配置匿名访问权限：

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
    // 静态文件路径允许匿名访问，避免预检请求被授权拦截
    endpoints.Map("/文件存储路径前缀/{**any}", b => b.UseStaticFiles()).AllowAnonymous();
});

内容的提问来源于stack exchange，提问作者Cəfərov Murad