Vue+Express+Nginx部署后Chrome控制台出现sockjs-node连接拒绝问题

我来帮你搞定这个问题！你遇到的sockjs-node/info连接失败、WDS提示Disconnected的情况，本质是Vue的Webpack Dev Server（WDS）热重载服务没有通过Nginx正确代理——浏览器里的WDS客户端默认会尝试直接访问localhost:8080的SockJS服务，但这个端口在外部无法访问，再加上HTTPS页面访问HTTP本地地址的混合内容限制，就导致了连接被拒绝的错误。

下面是具体的解决步骤：

1. 配置Vue开发服务器，指定SockJS的连接地址 #

根据你使用的Vue CLI版本，修改对应的配置文件，让WDS客户端知道要通过你的HTTPS域名来连接服务：

如果你用Vue CLI 2.x #

修改项目根目录下的config/index.js，在dev配置块中添加/调整以下内容：

dev: {
  // 保留你原有的其他配置
  host: '0.0.0.0', // 允许外部设备访问开发服务器
  disableHostCheck: true, // 关闭主机检查，避免域名不匹配的报错
  // 配置SockJS的连接参数
  devServer: {
    sockHost: 'mydomain.me',
    sockPort: 443,
    sockPath: '/sockjs-node'
  }
}

如果你用Vue CLI 3+ #

在项目根目录创建或修改vue.config.js，添加如下配置：

module.exports = {
  devServer: {
    host: '0.0.0.0',
    disableHostCheck: true,
    sockHost: 'mydomain.me',
    sockPort: 443,
    sockPath: '/sockjs-node'
  }
}

这些配置会告诉WDS客户端：不要直接连localhost:8080，而是通过你的HTTPS域名mydomain.me的443端口来建立SockJS连接。

2. 更新Nginx配置，代理SockJS请求 #

在你的Nginx server块中，新增一个location规则，专门处理sockjs-node路径的请求：

server {
  listen 443;
  server_name mydomain.me;
  ssl on;
  ssl_certificate /root/mydomain.me.cert;
  ssl_certificate_key /root/mydomain.me.key;
  ssl_session_timeout 5m;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

  # 原有主站点代理配置
  location / {
    proxy_pass http://localhost:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $http_host;
  }

  # 新增：代理SockJS请求
  location /sockjs-node {
    proxy_pass http://localhost:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $http_host;
    # 避免SockJS连接超时和缓存问题
    proxy_read_timeout 86400;
    proxy_buffering off;
  }
}

这个配置会把所有/sockjs-node开头的请求转发到本地的8080端口，同时保持WebSocket的连接升级，确保SockJS能正常通信。

3. 重启服务生效 #

• 重启Nginx，让配置生效：sudo nginx -s reload
• 重启你的Vue开发服务器，让新的WDS配置生效

做完这些后，重新访问https://mydomain.me，打开Chrome控制台检查——应该不会再出现sockjs-node连接拒绝的错误，WDS也会显示Connected，热重载功能就能正常工作啦！

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