如何本地以HTTPS协议运行Firebase Functions？

你的问题很典型——HTTPS前端无法访问HTTP后端是浏览器的混合内容策略导致的，虽然firebase serve本身没有直接提供HTTPS启动选项，但我们有几种靠谱的方法来解决这个问题：

方法一：用ngrok快速生成HTTPS代理（最简单） #

ngrok可以把本地的HTTP服务暴露成公网HTTPS地址，步骤超简单：

• 先正常启动你的Firebase Functions：

  firebase serve --only functions
  

  它会默认在http://localhost:5000运行。
• 下载并安装ngrok工具，然后在终端运行：

  ngrok http 5000
  

• 运行后ngrok会输出一个类似https://abc123.ngrok.io的HTTPS地址，把前端的API请求地址改成这个域名就行。这样前后端都是HTTPS，CORS和混合内容的问题都能解决。

方法二：自建Node.js HTTPS代理服务器（更可控） #

如果你不想用第三方工具，可以自己搭一个HTTPS代理，把请求转发到本地的Firebase Functions：

1. 生成本地自签名证书：
   用openssl命令生成（大部分系统自带openssl）：

   openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes
   

   按提示填写信息就行，本地开发不需要真实的CA证书。
2. 创建代理服务器文件：
   新建proxy.js，内容如下：

   const https = require('https');
   const fs = require('fs');
   const { createProxyServer } = require('http-proxy');
   
   // 初始化代理
   const proxy = createProxyServer({});
   // 加载证书文件
   const sslOptions = {
     key: fs.readFileSync('./key.pem'),
     cert: fs.readFileSync('./cert.pem')
   };
   
   // 创建HTTPS服务器，把请求转发到本地Firebase Functions端口
   https.createServer(sslOptions, (req, res) => {
     proxy.web(req, res, { target: 'http://localhost:5000' });
   }).listen(5001);
   
   console.log('HTTPS proxy running at https://localhost:5001');
   

3. 安装依赖并启动：

   npm install http-proxy
   

   先启动Firebase Functions：firebase serve --only functions，再启动代理：node proxy.js
4. 前端配置：把API请求地址改成https://localhost:5001，浏览器会提示证书不安全，这是本地自签名证书的正常情况，点击“高级”->“继续访问”即可。

额外说明 #

• 浏览器的混合内容策略是为了安全，所以HTTPS页面只能请求HTTPS资源，这是你遇到问题的核心原因，不是单纯的CORS配置问题（虽然你已经配置了CORS，但协议不匹配还是会被拦截）。
• 如果你用的是新版Firebase Emulator Suite（firebase emulators:start），同样可以用上面的两种方法来实现HTTPS访问。

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