React应用对接Google Drive图片遇CORS跨域问题求助

针对你遇到的CORS错误，这里有两个关键解决步骤，配合起来就能搞定：

1. 修改Google Apps Script的响应头，添加CORS允许规则 #

在你的buildSuccessResponse函数里，给返回的JSON响应添加跨域相关的HTTP头，告诉浏览器允许你的React应用访问这个接口。修改后的代码如下：

function buildSuccessResponse(posts, pages) {
  var output = JSON.stringify({
    status: 'success',
    data: posts,
    pages: pages
  });
  
  return ContentService.createTextOutput(output)
    .setMimeType(ContentService.MimeType.JSON)
    .setHeaders({
      'Access-Control-Allow-Origin': '*', // 允许所有域名访问，若需限制可替换为你的React应用域名，比如'https://your-react-domain.com'
      'Access-Control-Allow-Methods': 'GET, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type'
    });
}

如果你的React应用是固定域名，建议把*换成具体域名，安全性更高。

2. 重新部署Web App并调整权限设置 #

之前的部署可能权限设置不对，导致跨域验证失败，重新部署时按以下步骤操作：

• 打开Google Apps Script编辑器，点击右上角「部署」→「新部署」
• 类型选择「Web应用」
• 执行方式选择「我」（因为脚本需要访问你的Google Drive文件）
• 谁可以访问此应用：选择「任何人，甚至匿名」（如果你的相册是公开的）；如果只允许特定用户访问，选「任何人」（需登录Google账号）
• 点击「部署」，复制生成的新Web App地址，替换React代码里的WEB_APP_URL

另外提醒下：你的React代码里有个小问题——GAS返回的数组里是img_id字段，但你代码里用了list[i].book_url，这会导致报错，要改成list[i].img_id，然后可以用Google Drive的缩略图URL来展示图片，比如：

const imageUrl = `https://drive.google.com/thumbnail?id=${list[i].img_id}&sz=w800`;

最后，确保你的Google Drive相册文件夹已经设置了正确的共享权限（比如公开查看），否则脚本无法读取里面的图片文件。

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