Tabletop.js读取Google Sheet数据因CORS策略报错如何修复

该报错并非你的代码或站点配置出错，本质是Google官方已正式停用旧版Google Sheets API v3，你使用的tabletop.js完全依赖该旧接口提供服务，因此原本正常运行的程序会突然触发CORS拦截。

• 第一步：确认你的Google Sheet权限保持公开，设置为「任何知道链接的用户均可查看」
• 第二步：删除原有tabletop.js相关代码，替换为调用Google Sheets官方公开CSV导出接口的代码即可，示例代码和原逻辑完全兼容：

// 替换为你自己的Google Sheet ID，即原分享链接中d/和/edit之间的字符串
const SHEET_ID = '1vX54pYMqq_U6QRTn86zsh9wf8uel9Oiku6NZ3bPPBTg';
// 如果你需要读取的不是第一个工作表，把gid改为对应工作表的ID，可在Sheet地址栏中查询
const SHEET_GID = '0';

function init() {
  fetch(`https://docs.google.com/spreadsheets/d/${SHEET_ID}/export?format=csv&gid=${SHEET_GID}`)
    .then(res => res.text())
    .then(csvText => {
      // 解析CSV为对象数组，和原tabletop返回的data格式完全一致
      const rows = csvText.split('\n');
      const headers = rows[0].split(',');
      const data = rows.slice(1).map(row => {
        const values = row.split(',');
        const item = {};
        headers.forEach((header, idx) => {
          item[header.trim()] = values[idx]?.trim() || '';
        });
        return item;
      });
      // 直接调用你原有逻辑即可
      showInfo(data);
    })
    .catch(err => console.error('数据加载失败：', err));
}

function showInfo(data) {
  alert('Successfully processed!')
  console.log(data);
}

window.addEventListener('DOMContentLoaded', init)

注意：如果你的表格内容中包含逗号、换行等特殊符号，上述简易CSV解析逻辑可能出现格式错误，可引入轻量的第三方CSV解析库处理，无需修改核心逻辑。

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