如何在Google Scripts端设置CORS头解决表单提交跨域问题

问题根本原因 #

返回200状态码说明请求已经到达Google服务器并处理完成，报错是因为响应头没有携带符合要求的CORS配置，浏览器基于同源策略拦截了响应内容。

方案1：用Google Apps Script做代理层（最简便，无需配置Google Cloud权限） #

• 打开目标Google Sheets，点击顶部菜单栏「扩展程序」→「Apps Script」进入脚本编辑器
• 清空默认代码，替换为如下内容，根据你的实际需求修改写入表格的字段：

function doGet(e) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  // 按顺序写入你需要存储的参数，示例为写入请求时间、姓名、邮箱
  sheet.appendRow([new Date(), e.parameter.name, e.parameter.email]);

  // 配置CORS允许跨域
  return ContentService.createTextOutput(JSON.stringify({code: 200, msg: '提交成功'}))
    .setMimeType(ContentService.MimeType.JSON)
    .setHeaders({
      'Access-Control-Allow-Origin': '*', // 生产环境可替换为你的专属域名提高安全性
      'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type'
    });
}

// 处理浏览器预检请求
function doOptions(e) {
  return ContentService.createTextOutput()
    .setHeaders({
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type',
      'Access-Control-Max-Age': 3600
    });
}

• 点击右上角「部署」→「新建部署」，部署类型选择「Web应用」，执行身份选择你的账号，有权访问的人选「任何人（甚至匿名用户）」，完成部署后复制生成的Web应用URL
• 把你原代码中请求Google API的地址替换为上述Web应用URL即可正常请求

方案2：直接调用Google Sheets API的CORS配置方案 #

如果一定要直接调用官方API，按以下步骤配置Google Cloud权限：

• 进入Google Cloud控制台，打开你已启用Google Sheets API的对应项目
• 左侧菜单选择「API和服务」→「凭据」，找到你当前使用的API密钥
• 下滑到「应用限制」板块，选择「HTTP 引荐来源网址（网站）」，将你前端页面的完整域名（包括端口，本地调试可填http://localhost:端口号）添加到允许列表
• 保存配置后等待3-5分钟生效，再重新发送请求

本地调试临时方案 #

本地开发时可以临时用以下方案跳过CORS校验，仅可用于测试，不可用于生产环境：

• 安装浏览器CORS禁用插件
• Windows系统下Chrome浏览器可通过命令行启动："C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\chrome_dev_temp"
• Mac系统下启动命令：open -n /Applications/Google\ Chrome.app --args --disable-web-security --user-data-dir=/tmp/chrome_dev_temp

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