Expo应用使用隧道连接本地后端提示网络请求失败如何修复

修复步骤 #

• 切换Expo连接模式：你当前使用的隧道连接是走公网转发的，无法访问你电脑的内网IP 192.168.1.40。启动Expo时选择局域网连接模式，同时确保你的iPhone和开发电脑连接的是同一个WiFi网络。
• 修改后端监听地址：你当前的后端默认只监听本地回环地址，局域网设备无法访问。把服务端启动代码调整为：

app.listen(5000, '0.0.0.0', () => {
  console.log('服务运行在 http://0.0.0.0:5000')
})

• 处理端口占用问题：如果你使用的是macOS 12及以上系统，5000端口默认被AirPlay接收器占用，可以把后端端口改成其他未被占用的端口（比如3000、8080），同时同步修改fetch请求里的端口号即可。
• 开放防火墙端口：
  • Windows系统：在防火墙高级设置里添加入站规则，开放TCP 5000端口
  • macOS系统：在系统设置-网络-防火墙里，允许nodejs接收传入连接，也可以临时关闭防火墙完成测试
• 解除iOS ATS安全限制：iOS默认禁止未加密的HTTP请求，你需要在Expo项目的app.json/app.config.js中添加如下配置：

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSAppTransportSecurity": {
          "NSAllowsArbitraryLoads": true,
          "NSAllowsLocalNetworking": true
        }
      }
    }
  }
}

配置修改后需要重启Expo服务，重新构建开发版本才会生效。

• 验证网络连通性：先在iPhone自带的Safari浏览器里访问http://192.168.1.40:5000，如果能正常访问说明网络连通正常，再测试应用内的请求即可。

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