javascript youtube api 请求缓存答案

【问题标题】：javascript youtube api request cachejavascript youtube api 请求缓存
【发布时间】：2015-04-12 05:26:35
【问题描述】：

我遇到了一个奇怪的问题。

我使用 OAuth2 和 gapi.auth.authorize({client_id:'...',scope:'../youtube',immediate:false}) 将用户登录到我的应用程序。此方法允许用户选择使用他的连接帐户（身份）。

我使用 gapi.client.youtube.channels.list 和 gapi.client.youtube.playlistItems.list 检索用户的视频。

稍后在同一个应用程序中，用户可以单击一个按钮来选择另一个他连接的帐户（身份）。我再次使用 gapi.auth.authorize({client_id:'...',scope:'../youtube',immediate:false}) 方法。

问题是在成功更改帐户后， gapi.client.youtube.channels.list 方法会返回第一次调用的缓存结果。

一些备注： -in ie 11 它工作正常 - 在谷歌浏览器中，如果我从开发人员工具中禁用缓存，它也可以正常工作 - 在调用 channels.list 之前，我调用 /oauth2/v2/tokeninfo 和 /plus/v1/people/me，它们都返回正确的结果，即第二个帐户的数据

有什么办法可以解决这个问题吗？谢谢。

【问题讨论】：

我在developers.google.com/youtube/v3/getting-started#etags 读到“Google API 的客户端库在对 ETag 的支持方面有所不同。例如，JavaScript 客户端库通过包含 If-Match 的允许请求标头的白名单来支持 ETag和 If-None-Match。白名单允许正常的浏览器缓存发生，因此如果资源的 ETag 没有更改，则可以从浏览器缓存中提供资源。另一方面，Obj-C 客户端不支持 ETag 。”如何设置这些白名单？

标签： youtube-api youtube-channels

【解决方案1】：

有人可以通过使用 XMLHttpRequest（参见https://developers.google.com/api-client-library/javascript/features/cors）来克服这个问题。这可能是javascript YouTube api的一个错误。

【讨论】：

【解决方案2】：

对我有用的是在请求中引入一个愚蠢的额外参数来欺骗 Google 的系统......或者至少这是我的印象，因为它似乎始终如一地工作：

我只是将它添加到 URL 中：

"https://www.googleapis.com/youtube/v3/channels?mine=true" +
  "&part=" + encodeURIComponent("id,snippet") +
  "&key=" + encodeURIComponent(API_KEY) +
  "&random=" + encodeURIComponent(Math.random().toString())

这是完整的示例：

  refreshChannels(): Promise<YoutubeChannel[]> {
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            this.channels = JSON.parse(xhr.response).items.map(ch => new YoutubeChannel().deserialize(ch));
            console.log("[Youtube][loadChannels] Got some channels:");
            console.log(this.channels);
            this.onReceivedYoutubeChannels.next(this.channels);
            resolve(this.channels);
          } else {
            reject(JSON.parse(xhr.response));
          }
        }
      };

      xhr.onerror = () => reject();

      const user = gapi.auth2.getAuthInstance().currentUser.get();
      const oAuthToken = user.getAuthResponse().access_token;
      xhr.open(
        "GET",
        "https://www.googleapis.com/youtube/v3/channels?mine=true&part=" +
          encodeURIComponent("id,snippet") +
          "&key=" +
          encodeURIComponent(API_KEY) +
          "&random=" + encodeURIComponent(Math.random().toString())
      );
      xhr.setRequestHeader("Authorization", "Bearer " + oAuthToken);
      xhr.send();
    });
  }

我收到不同的 ETag。我还看到了一个可能也在缓存的 Cache-Control 响应标头？

cache-control: private, max-age=300, must-revalidate, no-transform

通过我的解决方案，我可以克服它。如果有人理解为什么可以详细说明此解决方案会很棒。

【讨论】：