Aspire Redis输出缓存引发SPA应用CORS错误问题求助

使用Aspire的Redis输出缓存时，缓存的响应缺失Access-Control-Allow-Origin头，导致SPA跨域请求触发CORS错误。核心原因是输出缓存中间件在CORS中间件之前执行：首次请求会经过CORS处理添加跨域头，但缓存的响应会直接返回，不会再经过CORS中间件，因此缺失必要的跨域标识头。

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

把UseCors移到UseOutputCache之前，确保所有请求（包括缓存命中的请求）都先经过CORS中间件处理：

const string policy = "CorsPolicy";
builder.Services.AddCors(options =>
{
    options.AddPolicy(policy, builder =>
    {
        builder.AllowAnyHeader();
        builder.AllowAnyMethod();
        builder.AllowAnyOrigin();
    });
});

var app = builder.Build();

// 先处理CORS，再处理输出缓存
app.UseCors(policy);
app.UseOutputCache();

app.MapDefaultEndpoints();

app.UseMiddleware<BehaviorMiddleware>();

app.UseHttpsRedirection();
app.UseAuthorization();

app.MapControllers();

app.Run();

2. 配置输出缓存保留CORS头（可选） #

如果调整顺序后仍有问题，可以显式配置输出缓存策略，强制保留CORS相关响应头，确保缓存内容包含跨域标识：

builder.Services.AddOutputCache(options =>
{
    options.AddBasePolicy(builder =>
    {
        // 根据请求Origin区分缓存，避免不同源共享缓存
        builder.WithVaryByHeader("Origin")
               // 缓存时保留CORS相关头
               .CacheVaryByRules(new CacheVaryByRules
               {
                   Headers = new[] { "Origin", "Access-Control-Allow-Origin" }
               });
    });
});

3. 为单个接口绑定自定义缓存策略（可选） #

也可以给需要缓存的接口单独配置带CORS支持的缓存策略：

// 注册自定义缓存策略
builder.Services.AddOutputCache(options =>
{
    options.AddPolicy("CorsCachePolicy", builder =>
    {
        builder.Duration(120)
               .WithVaryByHeader("Origin")
               .CacheVaryByRules(new CacheVaryByRules
               {
                   Headers = new[] { "Origin", "Access-Control-Allow-Origin" }
               });
    });
});

// 控制器中使用该策略
[HttpGet("")]
[OutputCache(PolicyName = "CorsCachePolicy")]
public async Task<IActionResult> GetVendors([FromQuery] GetUserCurrentGridModel query, CancellationToken cancellationToken = default)
{
    return Ok();
}

修改完成后重启应用，触发缓存后检查响应头，确认Access-Control-Allow-Origin存在，跨域请求即可正常执行。

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