在调试过程中发现当前端应用部署在Nginx下访问localhost时WebSocket连接无法建立而直接运行前端项目时则可以正常连接。通过浏览器F12排查问题后发现是WebSocket的URL路径不同我们实际需要的地址为ws://localhost/ws/但Nginx转发的请求却指向了ws://localhost/缺少了关键的/ws/路径前缀。为解决该问题在Nginx配置文件中添加了相应的路径重写规则于是在nginx.conf中配置以下代码# WebSocket location /ws/ { #proxy_pass http://localhost:8080/admin/; proxy_pass http://webservers/ws/; proxy_http_version 1.1; proxy_read_timeout 3600s; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade; } ​ # WebSocket 没有 /ws 前缀 location ~ ^/([a-zA-Z0-9_-]{8,32})$ { proxy_pass http://webservers/ws/$1; proxy_http_version 1.1; proxy_read_timeout 3600s; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade; }调整配置后Nginx能够正确地连接上WebSocket但是请求却不是转发至/ws/路径而是相当于重新转发至ws://localhost/问题并没有被彻底解决。同时又发现新的问题WebSocket连接成功建立后当有订单到达时有消息弹窗但是没有声音。在浏览器F12控制台中发现了以下错误“Uncaught (in promise) NotAllowedError: play() failed because the user didnt interact with the document first.”该错误源于现代浏览器的自动播放安全策略。浏览器要求用户必须先与页面进行交互如点击、触摸等才能允许音频或视频自动播放以防止网站在用户未授权的情况下擅自播放媒体内容。这个问题解决方案倒是相对简单只需在页面上进行一次用户交互例如点击任意区域之后再触发消息弹窗时音频即可正常播放。回到websocket连接问题在之前的Nginx配置中使用正则表达式location ~ ^/([a-zA-Z0-9_-]{8,32})$可能会与其他路径产生冲突因此需要从根源上解决问题。让我们到前端代码进行排查。前端项目路径为project-sky-admin-vue-ts\src\layout\components\Navbar\index.vue其中webSocket方法的代码如下webSocket() { const that this as any let clientId Math.random().toString(36).substr(2) //let socketUrl process.env.VUE_APP_SOCKET_URL clientId // 使用硬编码的WebSocket URL let socketUrl ws://localhost:8080/ws/ clientId console.log(socketUrl, socketUrl) if (typeof WebSocket undefined) { that.$notify({ title: 提示, message: 当前浏览器无法接收实时报警信息请使用谷歌浏览器, type: warning, duration: 0, }) } // ... 后续代码 }通过测试发现将 URL 硬编码为ws://localhost:8080/ws/ clientId后 WebSocket 能够正常连接这表明问题出在process.env.VUE_APP_SOCKET_URL环境变量的取值上。尽管尝试了多种方法查找资料依旧未能彻底解决环境变量配置不正确的问题。但至少目前功能可用。鉴于该问题依然存在那就得请教一下各位了。