纯HTML页面调用Google Script存数据至Google Sheet遇CORS错误求助

前端HTML/JS修正 #

你的前端代码存在几个关键错误，先做如下调整：

• 客户端请求里的Access-Control-Allow-Origin等CORS头是服务器端返回给浏览器的，客户端添加完全无效，直接删除
• 放弃JSON格式提交，改用application/x-www-form-urlencoded，既能避免预检请求，也适配Google Script的默认处理逻辑
• 补全表单结构（你提供的代码里<form>标签不完整）
• 调整fetch参数，把数据放在POST请求的body中，而非拼接在URL里

修正后的前端代码：

<div>
  <form id="contactForm">
    <textarea id="subject" name="subject" placeholder="Please tell us How we can assist you" style="height:200px"></textarea>
    <input type="submit" value="Submit">
  </form>
</div>

<script>
document.getElementById('contactForm').addEventListener('submit', function(e) {
  e.preventDefault();
  
  const url = "https://script.google.com/a/macros/in-school.net/s/......../exec";
  const formData = new FormData(this);
  const params = new URLSearchParams(formData);

  fetch(url, {
    method: 'POST',
    body: params,
    headers: {
      'Accept': 'application/json'
    }
  })
  .then(res => res.json())
  .then(res => {
    console.log(res);
    alert(res.result);
    this.reset(); // 提交后清空表单
  })
  .catch(err => {
    console.error('提交失败:', err);
    alert('提交失败，请稍后重试');
  });
});
</script>

Google Script端修正 #

必须确保Google Script的doPost函数正确处理请求，并返回带CORS头的响应：

1. 打开你的Google Script项目
2. 替换为以下代码（注意将"表单数据"改为你的Sheet名称，你的Google Sheet ID替换为实际Sheet的ID）：

function doPost(e) {
  try {
    // 打开目标Google Sheet
    const sheet = SpreadsheetApp.openById('你的Google Sheet ID').getSheetByName('表单数据');
    // 获取表单提交的参数
    const subject = e.parameter.subject;
    
    // 将数据追加到Sheet最后一行（第一个字段为提交时间）
    sheet.appendRow([new Date(), subject]);
    
    // 返回带CORS头的成功响应
    return ContentService.createTextOutput(JSON.stringify({result: '提交成功'}))
      .setMimeType(ContentService.MimeType.JSON)
      .setHeaders({
        'Access-Control-Allow-Origin': '*', // 允许所有来源，也可指定你的域名如http://localhost:3000
        'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type'
      });
  } catch (err) {
    // 返回错误响应
    return ContentService.createTextOutput(JSON.stringify({result: '提交失败', error: err.message}))
      .setMimeType(ContentService.MimeType.JSON)
      .setHeaders({
        'Access-Control-Allow-Origin': '*'
      });
  }
}

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

关键部署设置 #

这一步直接影响CORS和权限，务必正确配置：

• 点击Google Script右上角「部署」→「新部署」
• 类型选择「Web应用」
• 执行方式选择「我（你的Google账号）」
• 谁可以访问选择「任何人，甚至匿名」（必须选此项，否则匿名请求会被拦截）
• 点击「部署」，复制新的Web应用URL替换到前端代码中

额外注意事项 #

• 测试时不要直接打开本地HTML文件（会出现origin 'null'问题），使用本地服务器如http-server或VS Code的Live Server插件运行，确保origin为http://localhost:xxxx
• 若指定了特定的Access-Control-Allow-Origin（如生产域名），需确保前端域名与该值一致，匿名提交场景用*无问题

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