如何修复Firebase Functions调用时的CORS跨域错误

你遇到的跨域报错核心原因是cors中间件没有正常接管请求响应流程，以下是逐点修复方案：

核心问题点 #

1. 你把publicIp.v4()的查询逻辑写在了cors回调外层，一旦这行代码执行报错（比如VPC连接器路由异常导致公网IP查询失败），请求会直接返回错误响应，完全不会经过cors中间件处理，响应自然不会携带Access-Control-Allow-Origin头。
2. cors回调内调用异步方法souscription时没有加await，会导致Node.js事件循环中响应流程和cors中间件的头写入逻辑错位，部分场景下响应提前返回时CORS头还没写入。
3. 大概率没有给cors中间件传匹配的配置：你的请求带了自定义头x-api-key，会触发浏览器OPTIONS预检请求，默认cors配置不会放行自定义头，也不会匹配你指定的前端源，直接导致预检失败。

具体修改代码 #

首先先初始化带正确配置的cors处理器，不要直接使用无配置的cors：

// 替换数组内的地址为你实际的前端访问源，就是报错信息里的'url app'对应的完整源（带http/https，不带路径）
const corsHandler = cors({
  origin: ['https://你的线上前端域名', 'http://localhost:本地调试端口'],
  methods: ['POST', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'x-api-key']
})

然后修改index.js的函数入口，把所有逻辑都包裹在cors处理器内，给异步方法加await，同时加异常捕获：

exports.souscription = functions.runWith({
   vpcConnector: 'app-functions-connector',
   vpcConnectorEgressSettings: 'ALL_TRAFFIC'
}).https.onRequest(async (req, res) => {
  // 所有请求逻辑必须放在cors回调内，保证所有响应都经过cors处理
  return corsHandler(req, res, async () => {
    try {
      console.log('souscription IP:', await publicIp.v4())
      // 异步函数必须加await，等待业务逻辑执行完成再结束响应
      await gogologo.souscription(req, res)
    } catch (error) {
      console.error('函数执行异常:', error)
      res.status(500).json({ data: { error: error.message } })
    }
  })
})

额外注意事项 #

• 修改代码后重新部署Firebase函数，等待1-2分钟让旧实例完全下线再测试，浏览器可以勾选「禁用缓存」再刷新页面，避免缓存旧的失败预检响应。
• 不要使用报错提示里的no-cors模式请求，该模式下前端无法读取响应内容，完全不能解决业务问题。
• 检查gogologo.js内的所有响应分支，确保每个res.json调用后不会再执行其他发送响应的逻辑，避免出现ERR_HTTP_HEADERS_SENT错误打断CORS头写入。

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