如何配置USB连接的React Capacitor移动端APP，用localhost请求SendBird

方案1：通过Capacitor配置映射主机名到localhost #

Capacitor自带主机名映射功能，能让移动端APP把局域网IP请求的主机名伪装成localhost，既满足SendBird的localhost豁免规则，又不影响热重载和WebSocket连接。

修改你的capacitor.config.ts（或capacitor.config.json）：

const config: CapacitorConfig = {
  webDir: 'build',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.XXX.XXX:3000', // 保留你的局域网IP和开发端口
    hostname: 'localhost', // 核心配置：将请求主机名映射为localhost
    cleartext: true
  },
};

配置后，Capacitor会在内部把所有请求的主机名替换成localhost，SendBird就不会触发HTTPS校验，WebSocket连接也能正常通过局域网IP传输。

方案2：搭建本地可信HTTPS服务器 #

如果方案1不生效，直接给React开发服务器配置HTTPS，用本地可信证书绕过浏览器/SDK的安全校验：

1. 安装mkcert（本地证书生成工具）：根据系统选择安装方式，比如Mac用brew install mkcert，Windows可直接下载二进制文件。
2. 初始化本地CA证书：mkcert -install，这会给你的系统添加一个可信的根证书。
3. 在React项目根目录生成适配局域网IP的证书：mkcert 192.XXX.XXX localhost 127.0.0.1，执行后会生成两个文件：192.XXX.XXX.pem和192.XXX.XXX-key.pem。
4. 修改React启动脚本，开启HTTPS：
   在项目的package.json里修改start命令：

   "start": "HTTPS=true SSL_CRT_FILE=./192.XXX.XXX.pem SSL_KEY_FILE=./192.XXX.XXX-key.pem react-scripts start"
   

5. 更新Capacitor配置：

   const config: CapacitorConfig = {
     webDir: 'build',
     bundledWebRuntime: false,
     server: {
       url: 'https://192.XXX.XXX:3000', // 改为HTTPS协议
       cleartext: false
     },
   };
   

   这样SendBird会识别为合法HTTPS连接，WebSocket也能通过wss://协议正常工作。

方案3：USB调试端口转发 #

利用Android/iOS的USB调试端口转发，把移动端的localhost端口映射到电脑的开发服务器，让APP直接用localhost访问：

• Android操作步骤：
  1. 打开设备开发者选项，开启USB调试。
  2. 执行adb命令转发端口：adb reverse tcp:3000 tcp:3000，这条命令会把移动端的3000端口转发到电脑的3000端口。
  3. 修改Capacitor配置：

     const config: CapacitorConfig = {
       webDir: 'build',
       bundledWebRuntime: false,
       server: {
         url: 'http://localhost:3000',
         cleartext: true
       },
     };
     

• iOS操作步骤：
  1. 用Xcode打开Capacitor的iOS项目，连接你的iOS设备。
  2. 打开Xcode的Window > Devices and Simulators，选中你的设备，点击设备信息右侧的...按钮，选择Port Forwarding。
  3. 添加转发规则：本地端口填3000，远程端口也填3000，点击Add。
  4. 同样修改Capacitor配置为http://localhost:3000。

这样移动端APP访问localhost:3000时，请求会被转发到电脑的开发服务器，SendBird判定为localhost请求，无需HTTPS，WebSocket连接也能正常建立。

内容的提问来源于stack exchange，提问作者Sadman Yasar Sayem