javascript - xhr 缓存 getResponseHeader 中的值？

Question

我遇到了一个非常令人沮丧的错误。我不太确定发生了什么，但我认为 xhr 正在响应 header 上进行某种缓存。

我的应用程序正在使用 devise_token_auth 进行后端身份验证服务。我们将它与轮换访问 token 一起使用，因此我编写了一个在每个请求后运行的函数。

function storeAndGetResponseHeaders(xhr) {
    const headersObj = {};

    headerKeys.filter((key) => xhr.getResponseHeader(key))
    .forEach((key) => {
        headersObj[key] = xhr.getResponseHeader(key);
        window.sessionStorage.setItem(key, xhr.getResponseHeader(key));
    });

    return headersObj;
}

其中 headerKeys 是 ['access-token', 'client', 'expiry', 'uid', 'token-type']。因此，任何具有这些 header 的响应都应该将它们保存到 sessionStorage 中，然后将它们返回到一个对象中，该对象存储在我编写并添加到每个请求中的 AJAX 服务中。我们正在使用 rxjs，该服务只是它的一个薄包装。这就是 RxAjax.ajax 的样子。

ajax(urlOrRequest) {
    const request = typeof urlOrRequest === 'string' ? { url: urlOrRequest } : urlOrRequest;
    request.headers = Object.assign({}, this.headers, urlOrRequest.headers);
    request.url = `${this.baseUrl}${request.url}`;

    return Observable.ajax(request).map(this.afterRequest, this);
}

其中 this.headers 是上次请求中存储的 header (或从 sessionStorage 加载的 header )。 this.afterRequest 用于设置响应 xhr 的 header 。

我的问题是我的 header 对象中出现了错误的值(特别是旧的访问 token )。我注意到，当我在分配后添加 headersObj 的日志记录语句时，有时它会包含来自过去请求的旧响应 header 。但是，当我在开发控制台的“网络”选项卡中查看请求本身时，它在响应 header 中没有显示任何身份验证 header (“访问 token ”、“客户端”等)。 .)。如果我在浏览器上进行硬刷新，这个问题会修复一段时间，但会莫名其妙地返回。

请注意，我们正在使用 rxjs 来发出我们的请求，这可能是相关的(但我不认为这是导致此问题的原因，因为我正在尝试从原始的 xmlhttprequest 对象)。谢谢!

Answer 1

正如 Barmar 在评论中所建议的那样，这是一个缓存问题。 Chrome 控制台中可能存在错误，它没有显示缓存请求中的缓存 header 。因此，尽管看起来没有身份验证 header ，但实际上确实存在。

如果您使用 jQuery，您可以将选项 cache: false 添加到请求中以防止缓存。因为我不是，所以我做的第一件事就是尝试将 ?cache=${new Date().toJSON} 添加到每个请求，这成功地破坏了缓存并解决了我的问题(这就是cache: false 在 jQuery 中确实如此)。

我们的后端是在 Rails 中，所以我最终添加了

before_action :set_cache_headers

...

private

def set_cache_headers
  response.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"
end

到我的应用程序 Controller 。现在浏览器不会缓存任何请求。不确定这是否是我们的长期解决方案