iOS/Android模拟器无法连接Firebase模拟器Functions的求助

开发基于Firebase Hosting、Authentication和Functions的PWA，本地测试使用Firebase模拟器+iOS/Android模拟器：

• Webpack devServer以HTTPS托管PWA，已配置自签名RootCA，模拟器可正常加载HTTPS的PWA
• 调用Firebase Functions模拟器（http://localhost:5001）时，模拟器浏览器因混合内容阻止报错：

  [blocked] The page at https://theme.myapp.nl:8800/auth/login was not allowed to display insecure content from http://localhost:5001/mijn-app-1740a/us-central1/getThemeData.
  

• 桌面浏览器可正常调用，仅模拟器出现问题

方案1：通过Webpack代理将Functions请求转为HTTPS #

利用Webpack devServer的代理功能，把HTTPS请求转发到本地HTTP的Functions模拟器，避免混合内容问题：

1. 补充Webpack devServer的代理配置：

devServer: {
  // 原有配置...
  proxy: {
    '/functions-proxy': {
      target: 'http://localhost:5001',
      pathRewrite: { '^/functions-proxy': '' },
      changeOrigin: true
    }
  }
}

2. 修改Firebase Functions的模拟器连接代码，指定HTTPS的代理路径：

import { getFunctions, connectFunctionsEmulator } from 'firebase/functions';

const functions = getFunctions();
if (firebaseConfig.useEmulator) {
  // 替换原有的localhost:5001，改为当前HTTPS域名的代理路径
  functions.emulatorOrigin = `https://theme.myapp.nl:8800/functions-proxy`;
  connectFunctionsEmulator(functions, 'theme.myapp.nl', 8800);
}

方案2：Android模拟器强制允许混合内容 #

修改模拟器配置脚本，给Chrome/WebView添加允许混合内容的命令行参数：

1. 在你的Android配置脚本中，修改fingerprint.0的生成命令：

# 原命令添加--allow-running-insecure-content参数
echo "chrome --ignore-certificate-errors-spki-list=$SKPI_FINGERPRINT --allow-running-insecure-content" >./fingerprint.0

2. 重新执行脚本推送配置文件，重启模拟器后，Chrome会允许加载HTTP内容。

方案3：iOS模拟器手动允许不安全内容 #

在iOS模拟器的Safari中单独配置目标网站：

1. 打开Safari访问https://theme.myapp.nl:8800
2. 点击地址栏左侧的🔒图标，选择「网站设置」
3. 将「不安全内容」选项设置为「允许」

方案4：给Functions模拟器套HTTPS反向代理 #

用Nginx+mkcert生成合法本地证书，将Functions模拟器暴露为HTTPS服务：

1. 安装mkcert并生成证书：

# 安装mkcert（根据系统选择安装方式）
mkcert -install
# 生成包含目标域名的证书
mkcert theme.myapp.nl localhost 10.0.2.2

2. 配置Nginx反向代理（示例）：

server {
  listen 5002 ssl;
  server_name theme.myapp.nl;

  ssl_certificate /path/to/generated/theme.myapp.nl.pem;
  ssl_certificate_key /path/to/generated/theme.myapp.nl-key.pem;

  location / {
    proxy_pass http://localhost:5001;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $remote_addr;
  }
}

3. 修改Firebase Functions连接代码：

if (firebaseConfig.useEmulator) {
  connectFunctionsEmulator(functions, 'theme.myapp.nl', 5002);
}

4. 确保Android模拟器hosts已映射10.0.2.2 theme.myapp.nl（你的脚本已包含此步骤），iOS模拟器自动解析。

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