已启用CORS的Blazor Server应用仍拦截XMLHttpRequest请求问题

1. 修正中间件执行顺序 #

ASP.NET Core中间件的执行顺序直接影响请求处理流程，CORS中间件必须放在静态文件中间件之前，这样静态资源的请求才会经过CORS策略校验。

检查你的Program.cs，调整为如下顺序：

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: "NewPolicy",
                      policy =>
                      {
                          policy.AllowAnyOrigin()
                                  .AllowAnyMethod()
                                  .AllowAnyHeader();
                      });
});

var app = builder.Build();

// 先启用CORS策略
app.UseCors("NewPolicy");
// 再启用静态文件服务
app.UseStaticFiles();

app.UseRouting();
// 其他中间件配置...

如果UseStaticFiles在UseCors之前，静态资源请求会被静态文件中间件直接处理，不会触发CORS校验，进而导致跨域错误。

2. 为静态文件显式添加CORS头 #

若调整中间件顺序后问题仍存在，可以直接为静态文件的响应添加CORS头：

app.UseStaticFiles(new StaticFileOptions
{
    OnPrepareResponse = ctx =>
    {
        ctx.Context.Response.Headers.Append("Access-Control-Allow-Origin", "*");
        ctx.Context.Response.Headers.Append("Access-Control-Allow-Methods", "GET, OPTIONS");
        ctx.Context.Response.Headers.Append("Access-Control-Allow-Headers", "Content-Type");
    }
});

这种方式绕过中间件顺序限制，直接给静态资源响应注入CORS相关头信息。

3. 排查请求URL拼写错误 #

从错误信息中可见，请求的URL是https://localhost:7113/viedo1.mp4，但你的前端代码中写的是video1.mp4，存在拼写错误（viedo→video）。请确认实际请求的URL是否正确，拼写错误可能导致请求失败，同时掩盖真实的CORS问题。

4. 验证预检请求（OPTIONS） #

使用XMLHttpRequest请求时，浏览器会先发送OPTIONS预检请求。你可以在浏览器开发者工具的Network标签中查看OPTIONS请求的响应头，确认是否包含Access-Control-Allow-Origin，以此判断CORS策略是否被正确应用。

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