客户端调用Firebase函数返回index.html时的CORS问题解决

我明白你遇到的麻烦了——用Firebase函数返回其他HTML页面都正常，唯独返回index.html时就触发CORS错误，重定向反而没问题。这大概率是CORS配置的细节或者预检请求处理的问题，咱们一步步来解决：

1. 调整CORS中间件的配置 #

你当前用的cors({ origin: true })会自动反射请求的Origin，但有时候这种动态配置在返回主页面（index.html）时，可能因为请求环境的特殊性失效。可以先尝试明确指定允许的Origin来测试：

const cors = require('cors')({
  origin: '*', // 测试阶段先用通配符，生产环境一定要换成你的具体域名，比如"https://yourdomain.com"
  allowedHeaders: ['Content-Type'],
  methods: ['GET', 'POST', 'OPTIONS']
});

2. 手动添加响应头兜底 #

有时候cors中间件可能没正确给HTML响应加上头，咱们可以在发送内容前手动设置，确保CORS头存在：

exports.handler = function(req, res, _auth) {
  cors(req, res, () => {
    let indexHTML = fs.readFileSync('./hosting/index.html').toString();
    // 手动添加CORS头，作为中间件的兜底
    res.setHeader('Access-Control-Allow-Origin', '*'); // 生产替换为具体域名
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
    res.status(200).send(indexHTML);
  });
}

3. 确保OPTIONS预检请求被正确处理 #

跨域请求如果是复杂请求（比如带自定义头、非GET/POST简单方法），浏览器会先发送OPTIONS预检请求。虽然cors中间件应该处理这个，但有时候函数的逻辑会跳过它，咱们可以手动拦截处理：

exports.handler = function(req, res, _auth) {
  // 先处理OPTIONS预检请求
  if (req.method === 'OPTIONS') {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
    return res.status(200).send('');
  }

  // 处理正常请求
  cors(req, res, () => {
    let indexHTML = fs.readFileSync('./hosting/index.html').toString();
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.status(200).send(indexHTML);
  });
}

4. 检查函数部署缓存 #

有时候你修改了代码，但Firebase函数的旧版本还在缓存中运行。可以重新部署函数确保新配置生效：

firebase deploy --only functions

为什么返回其他页面没问题？ #

大概率是其他页面的请求场景不同——比如它们是同域请求，或者请求的Origin在Firebase Hosting的默认允许范围内，而index.html的请求是从完全跨域的环境发起的，触发了严格的CORS校验。

测试的时候可以先用浏览器的开发者工具查看请求头里的Origin字段，确认它和你允许的Origin匹配，这样能更快定位问题。

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