部署在DigitalOcean的React应用无法连接localhost:5000的Node.js API

核心问题原因 #

• 你混淆了服务端运行逻辑和客户端运行逻辑的差异：
  • 你的React应用是客户端渲染产物，运行在访问站点的用户的浏览器上，代码里写localhost:5000时，请求会被发往用户自己设备的5000端口，而非你的DigitalOcean服务器的5000端口
  • MongoDB的连接逻辑运行在你服务器的Node.js后端进程中，所以localhost:27017指向的是服务器本地，自然可以正常连接，二者没有可比性
• 站点是HTTPS协议，你前端代码写HTTP协议的接口地址会触发浏览器的混合内容拦截规则，直接发往localhost:5000的HTTPS请求没有对应SSL证书支撑，所以报ERR_SSL_PROTOCOL_ERROR错误
• 把localhost:5000替换为127.0.0.1:5000完全无法解决问题，二者在客户端场景下都是指向本地设备。

具体解决步骤 #

1. 配置Nginx反向代理 #

在你站点的Nginx配置文件（一般在/etc/nginx/sites-available/目录下对应你域名的配置文件）的server块中添加以下规则，将接口和socket请求转发到本地运行的5000端口服务：

location ~ ^/(api|socket.io) {
    proxy_pass http://localhost:5000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

修改后执行nginx -t检查配置无误，再执行systemctl reload nginx重载配置生效。

2. 修改前端请求代码 #

两种可选方案，推荐第二种更规范：

• 方案1：直接使用相对路径，无需写域名端口，自动匹配当前站点地址
  socket配置改为：const socket = io()
  axios请求改为：axios.post("/api/delete-domains")
• 方案2：使用环境变量区分开发与生产环境
  生产环境请求地址设置为https://www.xdomain.ml，开发环境保留http://localhost:5000，构建时自动切换，适配不同运行场景。

3. 验证修复 #

重新构建React应用，替换服务器上的前端静态资源，刷新页面即可正常连接接口和socket服务。

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