React表单同步Google Sheet报错‘An error occurred. Please try again’求助

1. 检查Google Apps Script部署权限 #

打开Apps Script编辑器，点击右上角「部署」→「管理部署」，点击现有部署的「编辑」按钮，确保：

• 执行权限：选择「我（你的邮箱地址）」
• 谁可以访问：选择「任何人，甚至匿名」
  点击「部署」，复制新生成的Web应用URL，替换前端代码中的fetch地址（旧URL会失效）

2. 添加CORS响应头解决跨域问题 #

修改Apps Script代码，在返回结果时添加跨域允许头，确保前端能正常接收响应：

function doPost(e) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  
  try {
    Logger.log('Incoming data: ' + JSON.stringify(e.postData.contents));
    const data = JSON.parse(e.postData.contents);
    
    // 处理空字段，避免undefined导致异常
    const rowData = [
      data.name || '',
      data.businessName || '',
      data.email || '',
      data.phoneNumber || '',
      data.message || ''
    ];
    sheet.appendRow(rowData);
    
    // 添加CORS允许头
    return ContentService.createTextOutput(JSON.stringify({ success: true }))
      .setMimeType(ContentService.MimeType.JSON)
      .setHeaders({ 'Access-Control-Allow-Origin': '*' });
  } catch (error) {
    Logger.log('Error: ' + error);
    return ContentService.createTextOutput(JSON.stringify({ success: false, error: error.message }))
      .setMimeType(ContentService.MimeType.JSON)
      .setHeaders({ 'Access-Control-Allow-Origin': '*' });
  }
}

3. 查看浏览器控制台定位具体错误 #

提交表单时，打开浏览器开发者工具（F12）切换到「控制台」标签：

• 查看Submitting form data:日志，确认发送的数据格式正确
• 查看Response status:或Error submitting form:日志，判断错误类型：
  • 若出现CORS相关错误：回到步骤1和2检查部署权限或响应头配置
  • 若出现网络错误：确认fetch的URL是最新部署地址，且网络可访问Google服务

4. 查看Apps Script执行日志定位后端错误 #

打开Apps Script编辑器，点击「查看」→「日志」：

• 查看Incoming data:日志，确认后端是否收到正确的JSON数据
• 查看Error:日志，获取具体后端报错（比如表格权限不足、JSON解析失败等）

5. 前端代码优化（可选） #

在前端错误提示中加入具体场景说明，方便调试：

catch (error) {
  console.error('Error submitting form:', error);
  const errorMsg = error instanceof TypeError && error.message.includes('CORS') 
    ? '跨域请求失败，请检查Apps Script部署配置' 
    : 'An error occurred. Please try again.';
  alert(errorMsg);
}

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