前端向VPS后端请求接口失败，本地正常线上报ERR_CONNECTION_REFUSED错误求助

问题描述 #

我把前后端部署到VPS上后，前端请求后端接口时一直报连接拒绝错误，本地运行完全正常。具体错误如下：

GET http://127.0.0.1:5000/api/cosplays net::ERR_CONNECTION_REFUSED

AxiosError: Network Error

问题分析 #

一眼就能揪出核心问题：你的前端代码里请求的地址是http://127.0.0.1:5000！本地开发时，这个地址指向你自己电脑的后端服务，自然没问题；但部署到VPS后，前端是在用户的浏览器里运行的，浏览器会尝试连接用户自己电脑的5000端口，而不是VPS上的后端服务，这肯定连不上啊！

解决步骤 #

• 修改前端请求地址
  把前端代码中所有请求的基地址，从http://127.0.0.1:5000改成你的VPS公网IP（比如http://111.222.333.444:5000），或者你绑定的域名（比如http://your-domain.com:5000）。另外要注意处理跨域问题，如果后端是Flask，可以用flask-cors库来允许跨域请求。

• 调整后端服务绑定地址
  后端服务不能只绑定127.0.0.1（这只能接受VPS本地的请求），要改成0.0.0.0，这样才能接收外部请求。以Flask为例，启动代码要改成：

  if __name__ == '__main__':
      app.run(host='0.0.0.0', port=5000)
  

  如果用Gunicorn等生产服务器部署，命令要写成：

  gunicorn -w 4 -b 0.0.0.0:5000 app:app
  

• 开放VPS端口与安全组

  1. 检查VPS本地防火墙：比如用ufw的话，执行以下命令开放5000端口：

     sudo ufw allow 5000/tcp
     sudo ufw reload
     

  2. 云服务商安全组：如果你用的是阿里云、腾讯云等，一定要去控制台的安全组规则里，添加允许外部访问5000端口的条目，否则外部请求会被云服务商拦截。

• 验证服务可用性

  • 先在VPS本地测试：执行curl http://127.0.0.1:5000/api/cosplays，确认后端服务能正常返回数据；
  • 再在本地电脑测试：执行curl http://[你的VPS公网IP]:5000/api/cosplays，确认外部能正常访问接口，这一步能帮你排查是服务问题还是网络问题。

备注：内容来源于stack exchange，提问作者Fedor Pasynkov