React调用SpringBoot接口本地正常Docker部署后连接超时如何解决

你的React代码是前端客户端代码，最终会下载到访问网站的用户浏览器中执行，不是在React容器内部运行。你之前测试的React容器内可ping通、curl通SpringBoot容器，仅能证明两个容器之间网络连通，但是你的本地浏览器不在Docker内部的桥接网络中，无法直接访问172.17.0.2这类Docker内部IP，所以才会报连接超时错误。

1. 启动SpringBoot容器时添加端口映射
   你当前的SpringBoot容器没有配置端口映射到宿主机，先停止原有SB容器，重新启动时添加-p 8080:8080参数，示例命令：

docker run -d -p 8080:8080 --name demo demo

启动后可先在本地浏览器直接访问http://localhost:8080/greeting验证是否能拿到返回数据。

2. 修改React fetch请求地址
   将原硬编码的Docker内部IP替换为宿主机的可访问地址，本地测试的话直接用：

await fetch('http://localhost:8080/greeting')

如果需要给同局域网内其他设备访问，替换为你宿主机的局域网IP即可，比如http://192.168.3.xx:8080/greeting。

• 不要在代码中硬编码接口地址，使用环境变量区分开发、生产环境的接口域名
• 生产环境部署时建议用Nginx做反向代理，将前端的API请求统一转发到后端服务，无需单独暴露后端服务端口，也可以避免跨域问题。

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