ASP.NET搭配Vue使用FsLightbox遭遇CORS跨域错误求助

错误信息 #

Access to XMLHttpRequest at 'https://localhost:44347/CarImages/3e0da2fa7fd0417ea2e2f4678229e264Logo.png' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

问题场景 #

使用FsLightbox组件加载本地后端图片时触发上述CORS错误，但相同图片路径在其他轮播组件中能正常加载，网络图片在FsLightbox中也可正常显示，仅本地后端图片+FsLightbox的组合会触发问题。

当前后端CORS配置（Program.cs） #

// Program.cs中的CORS配置代码
builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(
        builder =>
        {
            // 自定义策略配置
            builder.AllowAnyOrigin()
                                .AllowAnyHeader()
                                .AllowAnyMethod();
        });
});
var app = builder.Build();
// 应用CORS策略
app.UseCors();

Vue中FsLightbox的使用代码 #

// 按文档示例使用FsLightbox
<FsLightbox :toggler="toggler" :sources="vehicleImages" />

解决方案 #

1. 调整CORS中间件执行顺序 #

ASP.NET Core中间件顺序直接影响生效范围，app.UseCors()必须放在app.UseStaticFiles()、app.UseRouting()之后，app.UseAuthorization()之前。静态资源请求只有经过CORS中间件才会带上跨域头，调整后的示例：

var app = builder.Build();

// 其他前置中间件
app.UseStaticFiles();
app.UseRouting();
app.UseCors(); // 关键：放在Routing之后，Authorization之前
app.UseAuthorization();
// 其他后置中间件

2. 确认静态资源请求被CORS覆盖 #

如果CarImages是静态资源目录，默认静态文件中间件可能未应用CORS策略。可以通过自定义静态文件选项，确保该目录的请求经过CORS处理，或者直接将静态资源请求纳入CORS策略的覆盖范围。

3. 理解FsLightbox的请求差异 #

普通轮播组件用<img>标签加载图片，浏览器对img标签的跨域请求是宽松模式（不需要严格CORS验证）；而FsLightbox可能用XMLHttpRequest/fetch加载图片，这种方式必须经过完整的CORS验证，这就是两者表现不同的核心原因。

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

浏览器会对复杂跨域请求发送OPTIONS预检，确认后端AllowAnyMethod()是否正确处理了OPTIONS请求，同时检查是否有其他中间件拦截了OPTIONS请求导致CORS头未返回。

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