Google Apps Script POST请求随机成败及CORS问题求解

核心问题分析 #

请求不稳定的根源在于CORS预请求（OPTIONS）处理不完整。当前服务端仅返回空文本，未提供浏览器校验所需的CORS响应头，导致部分预请求被浏览器拦截，进而引发请求失败。

修复方案 #

1. 完善服务端doPost的CORS处理 #

修改Google Apps Script的doPost函数，针对OPTIONS请求返回完整的CORS响应头：

function doPost(e) {
  // 处理CORS预请求
  if (e.parameter.cors === 'options' || (e.postData && e.postData.type === 'OPTIONS')) {
    return ContentService.createTextOutput()
      .setMimeType(ContentService.MimeType.TEXT)
      .setHeaders({
        'Access-Control-Allow-Origin': '*', // 生产环境建议替换为你的前端域名，如"https://your-domain.com"
        'Access-Control-Allow-Methods': 'POST, OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type',
        'Access-Control-Max-Age': '3600' // 缓存预请求结果1小时，减少重复请求
      });
  }

  // 处理正常POST请求
  try {
    var data = JSON.parse(e.postData.contents);
    
    // 此处编写你的业务逻辑
    var response = {
      status: "success",
      message: "Request processed successfully"
    };

    return ContentService.createTextOutput(JSON.stringify(response))
      .setMimeType(ContentService.MimeType.JSON)
      .setHeaders({
        'Access-Control-Allow-Origin': '*' // 生产环境建议限制具体域名
      });
  } catch (error) {
    // 处理解析或业务异常
    return ContentService.createTextOutput(JSON.stringify({
      status: "error",
      message: error.message
    }))
    .setMimeType(ContentService.MimeType.JSON)
    .setHeaders({
      'Access-Control-Allow-Origin': '*'
    });
  }
}

2. 优化客户端请求配置 #

调整客户端fetch的请求参数，确保与服务端配置兼容：

async function API_HANDLER(request) {
  try {
    const url = "https://script.google.com/macros/s/你的脚本ID/exec"; // 替换为完整的GAS部署URL
    IsLoading(true);

    const fetchOptions = {
      method: "POST",
      mode: "cors", // 显式指定CORS模式
      headers: {
        "Content-Type": "application/json;charset=utf-8", // 改为标准JSON内容类型
      },
      body: JSON.stringify(request),
    };

    const response = await fetch(url, fetchOptions);

    if (!response.ok) {
      throw new Error(`HTTP错误状态码: ${response.status}`);
    }

    const data = await response.json();
    IsLoading(false);

    if (data?.status === "success") {
      return data;
    } else {
      console.log("请求处理失败 - ", data);
      SHOW_ERROR_POPUP("请求处理失败，请联系管理员。");
    }
  } catch (error) {
    IsLoading(false);
    console.error("请求异常: ", error);
    SHOW_ERROR_POPUP(`请求失败: ${error.message}`);
  } finally {
    IsLoading(false);
  }
}

3. 关键注意事项 #

• GAS部署设置：部署时需选择"任何人，甚至匿名"的权限（若需限制访问，可配合域名白名单），修改代码后务必重新部署获取最新执行URL。
• 安全性优化：生产环境不要用*作为Access-Control-Allow-Origin的值，替换为你的前端实际域名，避免跨域权限过度开放。
• 缓存清理：测试前可在浏览器开发者工具中禁用缓存，避免旧请求缓存干扰结果。

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