Vue.js调用ASP.NET Core API遇浏览器缓存问题，ResponseCaching未解决且致Token失效

你的问题核心是浏览器对GET请求的默认缓存机制，导致添加新用户后无法获取最新列表；同时使用ResponseCache时出现了token丢失的意外问题。下面分前端和后端两种方案逐一解决：

一、前端快速修复：绕过浏览器缓存 #

浏览器缓存GET请求的本质是URL重复，我们可以给请求URL添加一个随机参数（比如时间戳），让每次请求的URL都唯一，从而绕过缓存。

修改你getAdmins方法中的Ajax请求URL：

getAdmins: function (toggle) { 
    var self = this; 
    if (!self.adminOpen || !toggle) { 
        $.ajax({ 
            url: 'api/admins?t=' + new Date().getTime(), // 添加时间戳参数，确保URL唯一
            type: 'GET', 
            success: function (response) { 
                if (toggle) { 
                    self.toggleAdminOpen(); 
                } 
                self.admins = response; 
            }, 
            error: function (jqXHR, textStatus, errorThrown) { 
                alert('Error: ' + textStatus + '\n' + errorThrown); 
            } 
        }); 
    } else if (self.adminOpen) { 
        self.toggleAdminOpen(); 
    } 
}

这个方法无需修改后端，快速有效，适合大多数场景。

二、后端正确配置ResponseCaching（解决token丢失问题） #

你之前的配置缺少了启用ResponseCaching中间件的关键步骤，且中间件顺序错误可能导致token失效。按以下步骤修正：

1. 完整配置Startup.cs #

在ConfigureServices中添加AddResponseCaching()，并完善缓存配置：

public void ConfigureServices(IServiceCollection services) { 
    // 启用ResponseCaching服务
    services.AddResponseCaching();

    services.AddMvc(options => { 
        options.CacheProfiles.Add("Default", new CacheProfile() { Duration = 60 }); 
        options.CacheProfiles.Add("Never", new CacheProfile() { 
            Location = ResponseCacheLocation.None, 
            NoStore = true,
            Duration = 0 // 明确Duration确保配置生效
        }); 
    }); 
}

在Configure方法中调整中间件顺序：认证中间件必须在ResponseCaching之前，否则会缓存未认证的响应，导致token失效：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { 
    // 其他中间件（如静态文件）...

    // 先启用认证授权
    app.UseAuthentication();
    app.UseAuthorization();

    // 再启用ResponseCaching
    app.UseResponseCaching();

    app.UseMvc();
}

2. 直接在Action中设置缓存头（备选方案） #

如果CacheProfiles还是有问题，可以跳过配置，直接在GET接口中手动设置响应头：

[HttpGet]
public IActionResult GetAdmins() {
    // 强制浏览器不缓存该响应
    Response.Headers["Cache-Control"] = "no-cache, no-store, must-revalidate";
    Response.Headers["Pragma"] = "no-cache";
    Response.Headers["Expires"] = "0";

    // 返回最新的用户列表数据
    var admins = _adminService.GetAllAdmins();
    return Ok(admins);
}

3. 为什么之前会丢失token？ #

大概率是中间件顺序错误导致的：如果ResponseCaching在认证中间件之前执行，它会缓存未携带token的初始响应，后续请求直接使用缓存内容，看起来就像是token丢失了。调整顺序后就能避免这个问题。

总结 #

• 优先使用前端添加时间戳的方法，简单快速，无需后端改动；
• 若需后端控制缓存，务必正确启用ResponseCaching中间件并保证认证中间件优先执行；
• 避免缓存与认证相关的响应，防止出现登录状态异常。

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