Google Apps Script HTML页面fetch请求报dropping postMessage错误如何解决

报错原因 #

Google Apps Script的Web App页面运行在谷歌官方的沙盒iframe中，前端直接调用fetch发起跨域API请求会被iframe的源校验规则拦截，就会抛出你遇到的dropping postMessage.. was from unexpected window错误。

解决方案 #

改用GAS官方提供的「服务端请求+前端调用服务端函数」的逻辑实现，具体修改如下：

1. 修改GAS服务端代码（Code.gs） #

新增专门请求外部API的函数，用GAS内置的UrlFetchApp发起请求，不受跨域限制：

function fetchExternalApi() {
  // 替换为你的实际API地址
  const apiUrl = "你的API地址";
  // 如果API需要鉴权、自定义请求头，可以加在fetch的第二个参数里
  const res = UrlFetchApp.fetch(apiUrl);
  return JSON.parse(res.getContentText());
}

2. 修改前端HTML代码 #

删掉原有的前端fetch逻辑，改用google.script.run调用上面写的服务端函数：

<select id="client_ID">
</select>
</div>
<script>
google.script.run
  // 请求成功的回调
  .withSuccessHandler(data => {
    data.values.forEach(item => document.getElementById("client_ID").prepend(
      Object.assign(document.createElement("option"), {
        textContent: item[1],
        value: item[0]
      })
    ))
  })
  // 请求失败的回调
  .withFailureHandler(err => {
    console.log("Booo", err);
  })
  // 调用服务端函数
  .fetchExternalApi();
</script>

额外注意 #

• 修改代码后需要重新部署Web App，刷新页面再测试
• API的鉴权参数、密钥全部放在服务端处理，不要写在前端代码里避免泄露

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