如何用Google Apps Script前端从后端获取JSON并规避CORS错误

核心原因 #

浏览器同源策略会拦截前端页面跨域调用GAS API的请求——哪怕是GET请求，只要请求发起方与GAS域名不同，就会触发CORS校验。默认GAS响应未包含必要的CORS头，因此出现报错。

可行解决方案 #

1. 修正Web App部署权限

将GAS部署为Web App时，必须按以下设置配置：

• 执行权限：选择「我（部署者邮箱）」
• 访问权限：选择「任何人，甚至匿名用户」

注意：修改权限后需新建部署（而非仅更新现有版本），否则权限设置不会生效。

2. 服务端代码添加CORS响应头

在返回数据时，明确添加CORS头并设置正确的JSON MIME类型，替换原返回逻辑：

修改getAllRecords函数的返回部分：

function getAllRecords(e) {
  // 数据库连接、查询逻辑保持不变...

  const records = [];
  while (results.next()) {
    const record = {
      id: results.getInt('id'),
      name: results.getString('name'),
      make: results.getString('make'),
      price: results.getInt('price')
    };
    records.push(record);
  }

  // 新增CORS头并指定JSON类型
  return ContentService.createTextOutput(JSON.stringify(records))
    .setMimeType(ContentService.MimeType.JSON)
    .setHeaders({
      'Access-Control-Allow-Origin': '*', // 生产环境可替换为你的前端域名，提升安全性
      'Access-Control-Allow-Methods': 'GET, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type'
    });
}

同时优化doGet的路径判断逻辑，避免误匹配：

export function doGet(e) {
  if (e.pathInfo === 'get/all') { // 严格匹配路径，防止部分匹配引发错误
    return getAllRecords(e);
  } else if (e.pathInfo.startsWith('get/')) {
    return getRecord(e);
  } else {
    // 返回标准化错误响应，便于调试
    return ContentService.createTextOutput(JSON.stringify({error: 'Invalid path'}))
      .setMimeType(ContentService.MimeType.JSON)
      .setHeaders({
        'Access-Control-Allow-Origin': '*'
      });
  }
}

3. 简化客户端Fetch请求

移除不必要的请求头设置，让浏览器自动处理跨域请求：

useEffect(() => {
  fetch('https://script.google.com/macros/s/你的部署ID/exec/get/all')
    .then(result => {
      if (!result.ok) throw new Error('请求失败');
      return result.json();
    })
    .then(rowData => setRowData(rowData))
    .catch(err => console.error('请求错误:', err));
}, []);

调试建议 #

• 先在浏览器地址栏直接访问GAS API URL，确认能返回正常JSON数据，排除服务端逻辑错误。
• 若仍有CORS问题，查看浏览器控制台的具体错误信息，确认是否是权限或响应头未生效。

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