TypeScript Expo应用如何通过ethers.js连接本地Ganache节点

核心错误根源 #

当前代码配置的http://127.0.0.1:7545 指向的是运行Expo应用的载体本身（手机、模拟器），而非开发者电脑上部署的Ganache节点，因此所有链上RPC请求都无法触达目标服务，最终触发NO-NETWORK报错。这也是原生应用和Web应用在本地服务连接时的核心差异：Web端运行在浏览器内，localhost自然指向宿主机；但原生/跨端应用运行在独立的设备/模拟器沙箱中，不存在对宿主机localhost的默认连通性。

分场景调整节点连接配置 #

• 真机Expo Go调试场景
  • 首先将Ganache的监听地址从默认的127.0.0.1修改为0.0.0.0，开放所有网卡的访问权限
  • 查询开发者电脑当前的局域网IPv4地址，将代码中的ganacheUrl替换为http://<电脑局域网IPv4地址>:7545
  • 保证手机和电脑连接同一局域网，系统防火墙未拦截Ganache进程的7545端口入站请求
• 安卓模拟器调试场景
  • 安卓模拟器存在固定的宿主机映射地址，无需填写真实局域网IP，直接将ganacheUrl修改为http://10.0.2.2:7545即可
  • 同样需要确认Ganache监听地址未限制回环网卡访问
• iOS模拟器调试场景
  • iOS模拟器默认共享宿主机的网络栈，当Ganache正常监听在127.0.0.1时，模拟器内直接使用原127.0.0.1:7545地址即可连通，之前的连接失败通常是CORS限制或防火墙拦截导致

代码层面的必改优化项 #

• 不要在组件渲染阶段直接初始化JsonRpcProvider、获取signer实例：这类网络相关对象的初始化会随组件重渲染反复创建无效连接，需要全部移入useEffect回调内部执行
• 修正异步RPC调用的逻辑：当前代码中直接调用connectedWallet.getGasPrice()未添加await解析Promise，会因为未等待响应直接进入后续逻辑，触发网络类报错。修正后的初始化逻辑参考：

  useEffect(() => {
    const initWallet = async () => {
      const provider = new ethers.providers.JsonRpcProvider(ganacheUrl)
      const newWallet = ethers.Wallet.createRandom()
      const connectedWallet = newWallet.connect(provider)
      // 同步等待链上接口响应
      const currentGas = await connectedWallet.getGasPrice()
      setWallet({
        privateKey: connectedWallet.privateKey,
        address: connectedWallet.address,
        mnemonic: connectedWallet.mnemonic
      })
    }
    initWallet()
  }, [])
  

• 关闭Ganache端的严格CORS限制，或添加对应跨端请求的允许来源，避免Expo运行时发的RPC请求被跨域规则拦截返回空响应。

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