Flutter使用Dio时如何将localhost:3000替换为生产可用请求地址

问题根因 #

localhost 是设备本地回环地址，你本地电脑运行Node服务时用localhost:3000访问的是电脑本身的服务，但真机运行时，设备的localhost指向的是手机/真机自身，自然无法连接到你电脑上运行的后端服务。

开发阶段真机调试解决方案 #

• 确保测试真机和运行Node服务的电脑连接同一个WiFi局域网
• 查询电脑的局域网IP地址：Windows系统可在cmd执行ipconfig查看IPv4地址，Mac系统可在网络设置中查看当前WiFi的IP，格式通常为192.168.x.xxx
• 将Dio初始化配置中的muxServerUrl修改为http://<你的电脑局域网IP>:3000
• 修改Node服务启动配置，将最后一行的监听逻辑改为如下代码，允许局域网内设备访问服务：

app.listen(port, '0.0.0.0', () => {
  console.log(`Mux API listening on port ${port}`);
});

• 关闭电脑防火墙，或者放开3000端口的入站访问规则，避免防火墙拦截真机的请求

正式发布上线解决方案 #

你编写的Node后端服务需要部署到公网可访问的环境中，才能让所有用户的真机正常访问：

• 可以选择采购云厂商的轻量应用服务器，部署Node服务后绑定自己的域名，将Dio的baseUrl替换为你的线上域名，注意上线必须配置HTTPS，否则Android、iOS的新版本系统会默认拦截明文HTTP请求
• 新手也可以选择Serverless平台部署Node接口，无需自行维护服务器，操作门槛更低

优化建议 #

• 不要硬编码服务地址，通过环境变量区分开发、生产环境，开发环境自动读取局域网IP，生产环境自动读取线上地址，避免发布时手动修改出错
• 开发阶段可以在请求catch分支打印完整的错误信息，方便排查问题，不要仅输出自定义日志
• 注意保管好MUX的令牌密钥，仅在服务端环境变量中配置，不要泄露到前端代码中

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