本地 HTTPS 配置教程（方便本地调试，iOS Safari 必须通过 HTTPS 访问安全网页）

对于在本地测试 调用 iPhone 摄像头的需求，由于 iOS Safari 必须通过 HTTPS 访问安全网页，下面是几种简单快速的本地 HTTPS 配置方案，无需依赖复杂的公网穿透工具（如 ngrok），可直接通过完全本地化方式实现 iPhone 测试。

---

方案 1：使用 mkcert 创建本地可信 HTTPS 证书

特点：完全本地化，无需公网，支持自签名证书可被 iPhone 信任

步骤 1：安装 mkcert

# macOS 安装
brew install mkcert

# 初始化本地 CA
mkcert -install

步骤 2：生成证书

mkcert -key-file key.pem -cert-file cert.pem localhost 127.0.0.1 ::1 your-local-ip

将 your-local-ip 替换为你电脑的局域网 IP（如 192.168.1.100）

步骤 3：启动 HTTPS 服务器（Node.js 为例）

const https = require('https');
const fs = require('fs');
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('AR Test Page');
});

https.createServer({
  key: fs.readFileSync('key.pem'),
  cert: fs.readFileSync('cert.pem')
}, app).listen(3000);

步骤 4：在 iPhone 上访问

1. 确保 iPhone 和电脑在同一 Wi-Fi 网络

2. 打开 Safari，访问 https://your-local-ip:3000

3. 首次访问如提示证书不可靠：

   • 点击地址栏锁图标 > 查看证书 > 安装

   • 进入 iPhone 【设置 > 通用 > VPN与设备管理】，找到证书，选择 "信任"

---

方案 2：使用 local-ssl-proxy 快速代理 HTTP 到 HTTPS

特点：无需生成证书，一行命令就能将 HTTP 服务转为 HTTPS

步骤

npm install -g local-ssl-proxy

# 将 3000 端口的 HTTP 服务转为 HTTPS 3001
local-ssl-proxy --source 3001 --target 3000

iPhone 访问

• Safari 访问 https://your-local-ip:3001

• 如提示证书不可靠，直接选择继续访问即可

---

方案 3：使用 Expo (适用于 React Native/Web 项目)

特点：内置 HTTPS 隔空通道，自动生成可扫码访问的地址

步骤

npm install -g expo-cli
expo start --tunnel

--tunnel 可生成如 https://xxx.expo.dev 的地址

iPhone 访问

• 扫描终端中的二维码

• 或直接在 Safari 中打开 HTTPS 地址

---

方案 4：使用 serve 快速启动静态文件服务 + HTTPS

特点：适合纯前端 AR 页面调试，配合 mkcert 证书

步骤

npm install -g serve

# 启动 HTTPS 服务
serve -l 3000 --ssl --ssl-cert cert.pem --ssl-key key.pem

iPhone 访问

打开 https://your-local-ip:3000 ，首次需要信任证书

---

对比总结

方案	适用场景	优点	缺点
mkcert	长期本地开发	证书可信，一务之定	需手动安装证书
local-ssl-proxy	快速临时测试	无需证书，一行命令	需忽略证书警告
Expo	React Native/Web	自动 HTTPS，支持扫码	依赖 Expo 生态
serve	静态文件测试	简单轻量	需配合证书生成

---

关键注意事项

确认局域网 IP

• 确保 iPhone 和电脑在同一 Wi-Fi 网络

• 经由端扫描小程序，用 ifconfig (Mac/Linux)，或 ipconfig (Windows)

HTML 请求摄像头权限

<video id="camera" autoplay></video>
<script>
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(stream => document.getElementById('camera').srcObject = stream);
</script>

打开本地端口防火墙

# macOS 示例
sudo ufw allow 3000

---

推荐：

• 【长期开发】优先考虑方案 1 (配合 mkcert)

• 【临时测试】可考虑方案 2 (快速代理)