调用Google Drive API获取自定义缩略图返回500错误求助

前提 #

已通过Drive API成功上传带自定义缩略图的图片文件，调用List API查询到相关字段：

{
  "hasThumbnail":true,
  "thumbnailLink":"https://lh6.googleusercontent.com/cv0mHJqt00lm0KU1dv9viebh7757-LK2J02uGsGImR0Eei50KF7Dt091L6om8Zccdt1Nxzld0i4FsuA=s220",
  "thumbnailVersion":"1"
}

尝试使用该thumbnailLink获取缩略图，已携带凭证且拥有内容访问权限。

报错情况 #

请求返回500错误，错误详情：

{"config": {"adapter": [Function xhrAdapter], "data": undefined, "headers": {"Accept": "application/json, text/plain, /", "Authorization": "Bearer undefined"}, "maxBodyLength": -1, "maxContentLength": -1, "method": "get", "timeout": 0, "transformRequest": [[Function transformRequest]], "transformResponse": [[Function transformResponse]], "transitional": {"clarifyTimeoutError": false, "forcedJSONParsing": true, "silentJSONParsing": true}, "url": "https://lh3.googleusercontent.com/Uc5tD9HrJBfuEVW8dFA2ztgqvgfrMhpWUd_syGNco4PtTGSCSuDLOjLgObr7-ZdjKjT1xvlHhG7eWnk=s220", "validateStatus": [Function validateStatus], "xsrfCookieName": "XSRF-TOKEN", "xsrfHeaderName": "X-XSRF-TOKEN"}, "data": ".........(Some HTML)..............., ", "_responseType": "", "_sent": true, "_subscriptions": [], "_timedOut": false, "_trackingName": "unknown", "_url": "https://lh3.googleusercontent.com/Uc5tD9HrJBfuEVW8dFA2ztgqvgfrMhpWUd_syGNco4PtTGSCSuDLOjLgObr7-ZdjKjT1xvlHhG7eWnk=s220", "readyState": 4, "responseHeaders": {"Alt-Svc": "h3=":443"; ma=2592000,h3-29=":443"; ma=2592000,h3-Q050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"", "Content-Length": "1730", "Content-Type": "text/html; charset=UTF-8", "Date": "Wed, 17 Aug 2022 10:34:10 GMT", "Server": "fife", "x-content-type-options": "nosniff", "x-xss-protection": "0"}, "responseURL": "https://lh3.googleusercontent.com/Uc5tD9HrJBfuEVW8dFA2ztgqvgfrMhpWUd_syGNco4PtTGSCSuDLOjLgObr7-ZdjKjT1xvlHhG7eWnk=s220", "status": 500, "timeout": 0, "upload": {}, "withCredentials": true}, "status": 500, "statusText": undefined}

调用代码 #

const func = async () => {
  try {
    let result = await axios.get(
      `https://lh3.googleusercontent.com/Uc5tD9HrJBfuEVW8dFA2ztgqvgfrMhpWUd_syGNco4PtTGSCSuDLOjLgObr7-ZdjKjT1xvlHhG7eWnk=s220`,
      {
        headers: {
          Authorization: "Bearer " + drive.accessToken,
          // "Content-Type": "application/json",
        },
      }
    );
    console.log("result", result);
  } catch (error) {
    console.log(error.response);
  }
};

需求 #

需要获取上传时附带的自定义缩略图，但当前请求失败，寻求解决方法。

• 检查AccessToken有效性
  错误信息显示Authorization: "Bearer undefined"，说明drive.accessToken值为undefined，导致凭证无效。先打印drive.accessToken确认其是否正确获取、未过期。

• 使用正确的thumbnailLink
  代码中调用的URL与List API返回的thumbnailLink不一致（域名分别为lh3和lh6），直接使用List API返回的原始链接发起请求，避免手动修改或复制错误。

• 调整请求响应类型
  缩略图是二进制图片数据，axios默认会尝试解析为JSON导致失败，需设置responseType为blob或arraybuffer，示例代码：

  const func = async () => {
    try {
      const thumbnailUrl = "https://lh6.googleusercontent.com/cv0mHJqt00lm0KU1dv9viebh7757-LK2J02uGsGImR0Eei50KF7Dt091L6om8Zccdt1Nxzld0i4FsuA=s220";
      let result = await axios.get(thumbnailUrl, {
        headers: {
          Authorization: "Bearer " + drive.accessToken,
        },
        responseType: 'blob' // 根据后续处理需求，也可选择'arraybuffer'
      });
      // 如需在页面展示，可转换为object URL
      const imageUrl = URL.createObjectURL(result.data);
      console.log("图片链接", imageUrl);
    } catch (error) {
      console.log(error.response);
    }
  };
  

• 尝试移除Authorization头
  如果文件已设置公开访问权限，或缩略图链接本身包含临时授权参数，可尝试去掉Authorization头直接请求，避免凭证冲突。

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