如何从Express服务返回函数并通过script标签在网页中运行

你当前的代码存在3个核心问题，直接导致500错误和功能无法实现：

• GCP HTTP类型的Cloud Function 必须接收req（请求对象）、res（响应对象）两个入参，你当前的函数没有处理响应逻辑，平台无法拿到返回结果，直接触发服务端错误
• 代码本身存在运行时错误：console.log()的返回值是undefined，你将其赋值给widget后尝试调用widget()，相当于执行undefined()，会直接抛出类型错误
• 没有设置正确的响应头：通过<script>标签加载的资源，服务端必须返回Content-Type: application/javascript类型的响应，浏览器才会将内容作为JS代码执行；跨域场景下还需要配置CORS头，否则浏览器会拦截资源加载。

1. 重写Cloud Function代码 #

替换你当前的函数代码为如下内容，适配Node.js 16运行时：

exports.helloWorld = (req, res) => {
  // 配置CORS，*表示允许所有站点加载脚本，若要限制调用方可替换为自己的站点域名，比如 'https://your-site.com'
  res.set('Access-Control-Allow-Origin', '*');
  // 设置正确的JS内容类型
  res.set('Content-Type', 'application/javascript');
  
  // 这里写所有需要在浏览器端运行的代码，以字符串形式返回
  const browserRunnableCode = `
    function widget() {
      console.log("This is a widget running in user's browser");
      // 可按需添加任意浏览器端逻辑，比如操作DOM、发起请求等
      // 如果需要全局暴露调用入口，可挂载到window对象
      window.customWidget = widget;
    }
    // 脚本加载完成后自动执行
    widget();
  `;

  // 返回200状态和JS代码
  res.status(200).send(browserRunnableCode);
};

部署完成后，云函数端点就会返回可被浏览器直接识别执行的JS脚本。

2. 前端调用方式 #

直接在页面中用script标签引入你的云函数地址即可：

<script src="https://你的GCP云函数触发地址/helloWorld"></script>

脚本加载完成后会自动执行widget方法，你也可以在页面其他逻辑里通过window.customWidget()手动调用暴露的方法。

• 返回给浏览器的JS代码完全公开，不要在代码中写入服务端密钥、敏感逻辑等内容
• 生产环境建议将Access-Control-Allow-Origin配置为你自己的站点域名，避免脚本被第三方站点盗用
• 如果需要处理GET/POST参数动态生成JS内容，直接从req.query或req.body里取参数拼接进返回的代码字符串即可，注意做好参数过滤，避免XSS风险

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