使用Fetch向Google Sheet提交JSON数据失败求助

你的问题核心在于客户端请求配置里的mode: 'no-cors'，这会导致浏览器限制请求行为，使得JSON数据无法正确传递到Google Apps Script（GAS）端，最终造成表格无更新。下面是具体的问题拆解和修复步骤：

为什么mode: 'no-cors'会导致失败？ #

当启用no-cors模式时，浏览器会强制遵循简单请求规则：

• 不允许自定义Content-Type（仅支持application/x-www-form-urlencoded、multipart/form-data、text/plain三种），你设置的application/json会被浏览器忽略，导致GAS无法正确解析请求体；
• 请求响应会变成opaque（不可读取），你无法确认请求是否成功；
• 多数请求头和请求体的操作会被限制，实际发送到GAS的数据可能不完整。

修复步骤 #

1. 修改客户端JavaScript代码 #

移除mode: 'no-cors'配置，同时添加错误处理便于排查问题：

async function handleSubmit(e) {
  e.preventDefault();
  const _formData = { name: "test_name" };
  const jsonFormData = JSON.stringify(_formData);
  const fetchConfig = {
    method: 'POST',
    cache: 'no-cache',
    credentials: 'omit',
    headers: {
      'Content-Type': 'application/json'
    },
    redirect: 'follow',
    body: jsonFormData
  };
  const URL = "your_deployed_gas_url"; // 替换为你的GAS部署URL
  try {
    const response = await fetch(URL, fetchConfig);
    const result = await response.json();
    console.log("提交成功:", result);
  } catch (error) {
    console.error("提交失败:", error);
  }
}

2. 修改Google Apps Script的doPost函数 #

GAS的doPost函数需要返回明确响应（否则浏览器会判定请求失败），同时完善异常处理：

function doPost(e) {
  try {
    // 解析请求体数据
    const bodyJSON = JSON.parse(e.postData.contents);
    const sheetName = "test";
    const ss = SpreadsheetApp.getActiveSpreadsheet();
    const ws = ss.getSheetByName(sheetName);
    
    // 追加数据到表格
    ws.appendRow([bodyJSON.name]);
    
    // 返回成功响应
    return ContentService.createTextOutput(JSON.stringify({status: "success", message: "数据已追加"}))
      .setMimeType(ContentService.MimeType.JSON);
  } catch (error) {
    // 返回错误响应便于排查
    return ContentService.createTextOutput(JSON.stringify({status: "error", message: error.toString()}))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

3. 检查GAS部署设置（关键步骤） #

很多人会忽略这一步，导致修复后仍无法生效：

• 修改代码后重新部署GAS项目，选择“创建新版本”；
• 部署时，执行权限选择“我（你的邮箱账号）”；
• 访问权限选择“任何人，甚至匿名”（如果需要支持匿名提交）；
• 复制新生成的部署URL替换客户端代码里的your_deployed_gas_url。

验证方法 #

• 触发提交后查看浏览器控制台，确认是否有成功日志；
• 若出现跨域错误，检查GAS部署的访问权限是否设置正确；
• 可以在GAS的doPost函数中添加console.log(bodyJSON)，然后查看GAS的执行日志，确认是否接收到正确的数据。

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