配置Vue开发服务器代理WebSocket至HTTPS后端前端报ERR_CONNECTION_REFUSED问题

错误本质说明 #

net::ERR_CONNECTION_REFUSED 代表TCP网络层无法和目标端口建立连接，不属于HTTPS证书协商失败、CORS拦截类问题，直接从端口监听状态、网络连通性层面排查即可。

排查步骤（按优先级从高到低） #

• 第一步：验证后端服务监听状态
  • 直接在浏览器访问https://192.168.0.101:9080/greeting/info，观察是否返回JSON格式的SockJS探测信息。
  • 如果同样报连接拒绝，说明Spring Boot未正常监听9080端口，常见触发原因：
    • 启动日志存在SSL初始化报错：检查application.properties参数是否存在拼写错误，确认keystore.p12文件是否放在resources目录下、密钥库密码、密钥别名是否与生成时一致
    • 服务器防火墙/安全组拦截了9080端口入站流量
    • 执行netstat -tulpn | grep 9080确认进程绑定IP不是仅127.0.0.1
• 第二步：验证Vue开发服务器的监听绑定
  • Vue CLI默认devServer仅绑定localhost（即127.0.0.1），仅接受本机回环地址访问。如果通过https://192.168.0.101:9000访问前端页面，会直接触发连接拒绝。
  • 修复方式：在vue.config.js的devServer配置块中增加host: '0.0.0.0'，让devServer绑定所有网卡IP，支持局域网IP访问。
• 第三步：验证devServer代理配置
  • 如果后端直连正常、局域网访问前端9000端口正常，再排查代理问题：
    • 确认代理配置中不存在路径重写规则，错误改写/greeting开头的SockJS请求路径
    • 确认代理target地址的IP、端口无书写错误
• 第四步：验证SockJS客户端拼接的连接地址
  • 前端代码使用相对路径new SockJS("/greeting")时，会自动拼接当前页面的源地址。如果publicPath配置异常，会导致相对路径解析错误，拼接出不存在的端口地址，触发连接拒绝。
  • 排查方式：打开浏览器开发者工具Network面板，查看SockJS初始化时发出的/info请求的实际目标地址，确认地址与前端页面的源端口一致。

快速验证方案 #

临时将前端SockJS连接改为绝对地址，跳过devServer代理：

var socket = new SockJS("https://192.168.0.101:9080/greeting");

如果该方式可以正常连接，说明问题100%出在devServer代理配置环节。

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