CORS阻止资源访问：如何修复Firebase云函数中的跨域问题？

核心问题排查与修复方案 #

1. 修正模块规范混用问题 #

你当前代码混用ES模块import语法和CommonJSrequire语法导入cors，Firebase云函数运行环境会出现初始化失败，导致cors逻辑完全不生效，修改导入方式：

// 替换原来的const cors = require('cors')({ origin: true })
import cors from 'cors'
const corsHandler = cors({ origin: true })

后续调用时使用corsHandler替代原来的cors。

2. 手动处理OPTIONS预检请求 #

浏览器发送POST请求前会先发送OPTIONS预检请求，默认逻辑可能未正确响应预检请求，添加单独的预检处理逻辑：

export const deleteAsset = functions.https.onRequest((req, res) => {
  // 优先处理预检请求
  if (req.method === 'OPTIONS') {
    return corsHandler(req, res, () => {
      res.status(204).send('')
    })
  }
  // 原有业务逻辑
  return corsHandler(req, res, () => {
    try {
      functions.logger.log(req.body)
      cloudinary.v2.uploader.destroy(
        req.body.public_id,
        { invalidate: true },
        (error, result) => {
          if (error) return res.status(500).send(error)
          return res.status(200).send(result)
        }
      )
    } catch (error) {
      return res.status(500).send('deleteAsset函数运行出错')
    }
  })
})

3. 验证云函数部署信息 #

• 去Firebase控制台云函数列表，确认deleteAsset函数实际部署的region与请求URL中的us-central1一致，region不匹配会导致请求根本没有进入你编写的函数，自然不会返回CORS头
• 检查部署日志确认函数部署成功，部署完成后等待2分钟再测试，避免缓存导致的旧逻辑生效

4. 排除服务工作线程拦截 #

报错信息中出现firebase-auth-sw.js说明Firebase Auth的服务工作线程可能拦截了请求，测试时按以下步骤禁用缓存：

1. 打开浏览器开发者工具->应用->服务工作线程
2. 勾选「绕过网络缓存」
3. 刷新页面后重试请求

验证方法 #

部署修改后的代码后，可通过curl命令直接验证CORS配置是否生效：
curl -X OPTIONS -H "Origin: http://localhost:3000" -H "Access-Control-Request-Method: POST" 你的云函数URL -v
如果返回头中包含access-control-allow-origin: http://localhost:3000即说明配置成功。

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