Vue CLI 3.5.5标准安装后出现WebSocket及CORS错误求助

刚碰到过类似的问题，给你几个针对性的排查和解决步骤，应该能搞定：

1. 先搞定WebSocket握手失败的问题 #

这个错误大概率和Vue CLI devServer的热重载WebSocket连接有关，毕竟你是升级后出现的，可能是配置默认值的变化导致的：

• 先试试在vue.config.js里明确指定WebSocket的连接地址，确保和devServer的端口匹配：

module.exports = {
  devServer: {
    client: {
      webSocketURL: 'ws://localhost:8080/ws' // 换成你实际用的开发端口，比如8081
    }
  }
}

• 如果项目里配置了API代理，检查代理规则是不是误拦截了WebSocket请求。比如代理/api的时候，要确保不处理WS请求，或者按需开启：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://你的后端API地址',
        changeOrigin: true,
        ws: false // 这里设为false，避免代理WebSocket；如果后端需要WS代理就设为true
      }
    }
  }
}

• 还有个简单的排查方法：换个开发端口试试，说不定原来的端口被其他程序占用了，在vue.config.js里改个端口：

module.exports = {
  devServer: {
    port: 8081
  }
}

2. 解决CORS问题的常规操作 #

如果CORS是针对API请求的，最稳妥的方式是用devServer代理规避浏览器的跨域限制，不用后端改配置也能搞定：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://你的后端API地址',
        changeOrigin: true,
        pathRewrite: { '^/api': '' } // 如果后端接口没有/api前缀，就加这个重写路径
      }
    }
  }
}

之后前端请求/api/xxx就会被代理到后端服务器，浏览器不会触发跨域报错。

3. 清理缓存和重启服务，解决玄学问题 #

有时候缓存会搞出奇怪的问题，按这个顺序操作一遍：

• 用Ctrl+Shift+R硬刷新浏览器，清除页面缓存
• 完全关掉Vue CLI的开发服务，再重新跑npm run serve
• 如果还是不行，删掉node_modules和package-lock.json，重新npm install，排除依赖冲突的可能

4. 考虑升级Vue CLI版本 #

3.5.5确实是比较老的版本了，可能存在已知的WebSocket或CORS相关bug。可以试试升级到3.x分支的最新版本（比如3.12.1），执行命令：

npm update @vue/cli-service

如果项目允许，甚至可以直接升级到Vue CLI 4+，兼容性更好，bug也更少。

额外排查小技巧 #

• 打开浏览器的开发者工具，看Network面板里的WebSocket请求，检查请求URL是不是正确，有没有返回404或者其他错误码
• 如果开了防火墙或者VPN，暂时关掉试试，说不定是它们拦截了WebSocket连接
• 确认项目里有没有自己写的WebSocket代码，会不会和devServer的热重载WS端口冲突

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