如何在HTML页面向Google Apps Script发送POST请求？遇CORS问题

此前正常运行的HTML页面向已部署的Google Apps Script应用发送POST请求功能，从昨日起持续弹出CORS错误。

已尝试的解决步骤：

• 在请求中添加redirect:'follow'
• 请求头设置'Content-Type': 'text/plain;charset=utf-8'
• 将应用设置为以"我"身份执行，允许匿名访问

客户端代码片段 #

fetch('https://script.google.com/macros/s/scriptID/exec', {
  redirect: 'follow',
  method: 'POST',
  body: 'name=John&time=2pm',
  headers: {
   'Content-Type': 'text/plain;charset=utf-8',
  },
  body: 'name=John&time=2pm'
})
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.error(error));

Google Apps Script端代码片段 #

function doPost(e) {
  return ContentService.createTextOutput("Hello World.");
}

报错信息 #

Access to fetch at 'https://script.googleusercontent.com/macros/echo?user_content_key=RKhCMzKlHGhMyMLduJ9h1mEqXXahhcVI_B1XUiY-uXYCA2avW6QEFIzPNuAOuqiCZxNnefexPmskG-pqs9CPzeLZxtrYybMhm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnArw_oV2MpMq3qjVF8H4XS9_NTQKCR_pNm9X1iIkiAGMBwUfPQF5TBrDregaghr_F4OeYIU5d4Ai-OP0kwNgroizGK8DWxIQmdz9Jw9Md8uu&lib=MQPbBZFGo2AGvsxr1HURYz_BIqPDiKvt_' (redirected from 'https://script.google.com/macros/s/AKfycbyf_P8NNxR34tNj-TS617RnFWsOtWQjTAdLUQPVc0TWOoxAk3K4a5EPRa0LrmXy_qwBhg/exec') from origin has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value '.....

可行解决方法 #

1. 重新部署Web应用并确认设置
   必须选择“任何人，甚至匿名”访问权限，执行身份设为“我”，每次修改设置后都要重新生成部署URL，旧URL会失效。
2. 修正客户端请求错误
   移除代码中重复的body字段，避免语法异常导致请求失败；若使用表单格式参数，可将Content-Type改为application/x-www-form-urlencoded，更适配GAS的参数解析逻辑。
3. 在GAS端添加CORS响应头
   修改doPost函数，明确返回CORS允许的头信息：

   function doPost(e) {
     return ContentService.createTextOutput("Hello World.")
       .setHeaders({
         "Access-Control-Allow-Origin": "*",
         "Access-Control-Allow-Methods": "POST",
         "Access-Control-Allow-Headers": "Content-Type"
       });
   }
   

4. 避免使用本地文件协议测试
   不要直接用file://打开HTML文件发起请求，改用本地服务器（如http://localhost）测试，file://协议的CORS限制更严格。

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