使用App Script向Google Sheet写入数据时遭遇CORS错误求助

核心问题分析 #

1. CORS错误根源：Web应用部署权限设置不正确，触发浏览器跨域请求拦截
2. 参数解析错误：App Script未正确解析POST请求的JSON数据
3. 前端请求格式不匹配：请求体格式与Content-Type声明不一致

步骤1：修正App Script部署设置 #

重新部署Web应用时，严格按以下配置操作：

• 执行权限选择 “我自己”
• 谁可以访问选择 “任何人，甚至匿名”（若后续需验证用户身份，可再调整权限，匿名访问是快速解决CORS的核心）
• 每次修改代码后，必须选择“新版本”重新部署，复制最新的部署URL作为前端的apiUri

步骤2：修正App Script代码（正确解析POST数据） #

原代码未解析JSON请求体，修改后可正确读取参数并返回合规的CORS响应：

function doPost(e) {
  try {
    // 解析POST请求的JSON内容
    var params = JSON.parse(e.postData.contents);
    var selected = params.selectedYear;
    
    var ss = SpreadsheetApp.openById("1GeHldpOtB9CZAQjVZH66HJvPAAj7"); 
    var sheet = ss.getSheetByName("Sheet1");
    var lastRow = sheet.getLastRow();

    sheet.getRange(lastRow + 1, 1).setValue(selected);

    // 返回带CORS头的JSON响应
    return ContentService.createTextOutput(JSON.stringify({"status": "success"}))
      .setMimeType(ContentService.MimeType.JSON)
      .setHeaders({
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "POST",
        "Access-Control-Allow-Headers": "Content-Type"
      });
  } catch (error) {
    // 错误处理并返回响应
    return ContentService.createTextOutput(JSON.stringify({"status": "error", "message": error.toString()}))
      .setMimeType(ContentService.MimeType.JSON)
      .setHeaders({
        "Access-Control-Allow-Origin": "*"
      });
  }
}

步骤3：修正前端fetch请求代码 #

原请求体未转为JSON字符串，且Content-Type设置错误，修改后与后端格式匹配：

fetch(apiUri, {
  method: 'POST',
  body: JSON.stringify({"selectedYear": 1998}), // 将对象转为JSON字符串
  headers: {
    'Content-Type': 'application/json;charset=utf-8', // 声明请求体为JSON格式
  }
}).then(response => response.json())
  .then(data => {
    console.log("success:", data);
  }).catch(err => {
    console.log("Error:" + err);
  });

额外注意事项 #

• 确认Google Sheet的ID正确，且部署App Script的账号拥有该表格的编辑权限
• 若仍报CORS错误，检查前端使用的apiUri是否为最新部署版本的URL（旧版本URL的权限配置可能不生效）
• 如需限制访问，可取消匿名设置改用OAuth2验证，但会增加实现复杂度，建议先解决基础问题再优化权限

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