XMLHttpRequest请求Google Sheets发布页面遇CORS错误解决方案问询

方案1：Google Apps Script 代理（最稳定，零额外成本，适合自定义需求） #

该方案利用Google生态内的无服务器工具做中间层，从根源解决跨域问题，同时支持自定义数据返回格式，适配多表同步需求。
操作步骤：

1. 打开需要同步的Google Sheet，点击顶部「扩展程序」→「Apps 脚本」进入代码编辑器
2. 替换默认代码为以下内容：

function doGet(e) {
  // 支持多表查询：通过请求参数 ?sheet=表名 指定要返回的工作表
  const sheetName = e.parameter.sheet || "默认工作表名称";
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName);
  const rawData = sheet.getDataRange().getValues();

  // 处理为前端易解析的JSON格式
  const header = rawData[0].map(item => item.trim());
  const result = rawData.slice(1).map(row => {
    const rowObj = {};
    header.forEach((key, index) => {
      const val = row[index];
      rowObj[key] = !isNaN(val) ? Number(val) : val;
    });
    return rowObj;
  });

  // 配置CORS头允许跨域访问
  return ContentService.createTextOutput(JSON.stringify(result))
    .setMimeType(ContentService.MimeType.JSON)
    .setHeaders({
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, OPTIONS"
    });
}

3. 点击编辑器右上角「部署」→「新建部署」，部署类型选择「Web应用」，执行身份选择你的账号，可访问范围选择「任何人，甚至匿名用户」，完成部署后复制生成的Web应用链接。
4. 前端代码直接请求该链接即可，无需CSV解析工具，返回数据可直接使用：

let fonds_xmlhttp = new XMLHttpRequest();
fonds_xmlhttp.onload = function () {
  if (this.readyState == 4 && this.status == 200){
    const fonds_data = JSON.parse(this.responseText);
    // 直接处理数据填充表格即可
  } else {
    console.log("status: " + this.status);
  }
};
// 多表场景可加参数指定工作表
fonds_xmlhttp.open("GET", "你部署得到的GAS链接?sheet=你的工作表名", true);
fonds_xmlhttp.send();

方案2：Webflow 官方Google Sheets集成（零代码，运维成本最低） #

Webflow原生支持绑定Google Sheets作为数据源，无需写代码，配置后可开启自动同步，数据更新后自动同步到站点页面，无跨域问题。
操作逻辑：进入Webflow后台对应项目，找到集合/数据源设置，选择绑定Google Sheets，按照提示授权账号并选择对应工作表，设置同步频率后，直接将页面元素绑定到数据源字段即可。 #

方案3：CORS代理（仅适合临时测试） #

如果仅需要临时测试功能，可在请求链接前拼接公共CORS代理服务前缀，即可绕开跨域限制，缺点是第三方代理服务稳定性不可控，不建议生产环境使用。 #

本地测试临时解决方法 #

当前本地打开HTML报跨域是因为本地文件协议（file://）的origin为null，可安装VS Code的Live Server插件，启动本地HTTP服务打开页面测试，origin变为本地HTTP地址，可解决部分测试场景的跨域报错。 #

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