本地测试Firebase遇CORS限制：跨端口Post请求预校验失败

我之前也碰到过一模一样的情况！本地开发时Firebase Hosting跑在localhost:5000，Cloud Functions在localhost:5001，端口不同触发浏览器同源策略，直接把预飞OPTIONS请求拦下来了。给你几个靠谱的解决办法，按优先级推荐：

1. 用Firebase Hosting的重写规则（官方推荐） #

这是最省心的方案，直接让Hosting代理请求到Functions，彻底消除跨域问题。

修改你的firebase.json，在hosting配置里添加rewrites规则：

{
  "hosting": {
    "public": "public", // 你的Hosting静态文件目录
    "rewrites": [
      {
        "source": "/api/sendEnquiry", // 前端请求的路径
        "function": "sendEnquiry" // 对应的Cloud Function名称
      }
    ]
  }
}

配置完成后重启firebase serve，前端就可以直接发送请求到http://localhost:5000/api/sendEnquiry，Hosting会自动把请求转发到对应的Function，完全不用管5001端口，同源问题直接解决，而且和生产环境的请求逻辑一致。

2. 在Cloud Function中手动处理CORS #

如果不想修改Hosting配置，也可以在Function代码里添加CORS支持，让它正确响应预飞请求。

首先安装cors包：

npm install cors

然后修改你的Function代码：

const functions = require('firebase-functions');
const cors = require('cors')({ origin: true }); // 允许所有源访问，生产环境可指定域名

exports.sendEnquiry = functions.https.onRequest((req, res) => {
  // 先通过cors中间件处理跨域
  cors(req, res, () => {
    // 手动处理OPTIONS预飞请求
    if (req.method === 'OPTIONS') {
      res.set('Access-Control-Allow-Methods', 'POST');
      res.set('Access-Control-Allow-Headers', 'Content-Type');
      res.status(204).send('');
    } else {
      // 这里写你原有的POST请求处理逻辑
      res.status(200).json({ message: 'Enquiry sent successfully!' });
    }
  });
});

这样Function会正确响应浏览器的预飞请求，跨域报错就会消失。注意origin: true在本地开发没问题，上线后建议改成你的生产域名，比如origin: "https://your-project.web.app"。

3. 临时使用浏览器跨域插件（不推荐长期用） #

如果只是临时测试，可以用浏览器的跨域插件绕过同源策略，比如Chrome的「Allow CORS: Access-Control-Allow-Origin」。不过这只是临时方案，上线前一定要用前两种方法解决，不能依赖插件。

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