同一AWS EC2上Docker部署的React应用如何请求Golang后端服务？

问题根因 #

你遇到的连接拒绝错误核心原因是：React代码运行在访问者的本地浏览器中，你代码中写的http://localhost:9234指向的是访问者自身设备的9234端口，而非EC2服务器的9234端口，自然无法连通。你在EC2内部执行curl时用的localhost是EC2自身的网络环境，且Golang服务的9234端口已经在EC2本地暴露，所以可以正常请求。

解决方案 #

方案1：直接替换请求地址为EC2公网IP（简单快速，适合测试场景） #

1. 修改你的axios请求代码，把localhost替换为EC2的公网IP：

// 把<EC2_PUBLIC_IP>替换为你实际的EC2公网地址
axios.post('http://<EC2_PUBLIC_IP>:9234/todos', { "name": todo, "completed": false },).then((res) => {
      console.log(res)
      if (res.data.todo.name === todo) {
        setTodos([...todos, todo]);
      }
    }).catch((err) => { console.log(err) });

2. 进入AWS EC2控制台的安全组配置，开放9234端口的入站规则，允许你所在的IP段（测试场景可临时开0.0.0.0/0）访问。
3. 给Golang服务配置CORS跨域规则，允许来自EC2公网IP的前端请求，否则浏览器会拦截跨域请求。

方案2：Nginx反向代理（生产环境推荐） #

无需额外暴露Golang服务端口，也不存在跨域问题，是更稳妥的方案：

1. 修改axios请求为相对路径：

axios.post('/api/todos', { "name": todo, "completed": false },).then((res) => {
      console.log(res)
      if (res.data.todo.name === todo) {
        setTodos([...todos, todo]);
      }
    }).catch((err) => { console.log(err) });

2. 修改你前端容器的Nginx配置，增加反向代理规则：

location /api/ {
    # 把请求转发到EC2本地的9234端口
    proxy_pass http://localhost:9234/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

3. 重启Nginx容器即可生效，安全组只需要保留80/443端口的开放规则即可，无需暴露9234端口，安全性更高。

注意事项 #

不要尝试用Docker容器名作为请求地址，容器名通信仅适用于Docker内部网络的容器之间互相调用，前端代码运行在浏览器侧不在Docker网络内，该方式不生效。

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