Vue.js 项目中 Firefox（而非 Chrome）中的 Websocket 问题

Question

项目意味着服务器端（现在它的 Laravel 通过 docker 在本地主机上）和前端 - Vue.js。

我执行的步骤：

1. 创建新的 Vue 项目（使用默认设置：仅 babel 和 lint）
2. 安装 axios

3. 向 Login 组件添加一些逻辑

   <script>
   
     var axios = require('axios');
     var base64 = require('js-base64').Base64;
   
   
       export default {
           name: 'login-component',
           data() {
               return {
                   login: '',
                   password: '',
                   error_message_text: '???????????? ????? ??? ??????',
                   error_message_status: false,
                   success_message_text: '?? ??????? ????? ? ???????',
                   success_message_status: false,
                   server_response_result: ''
               }
           }
           methods: {
   
               loginUser() {
                       var vm = this; // axios scope solution
   
                       axios.defaults.headers.post['Content-Type'] = 'application/json';
   
                       axios.post( // forming request to the server api
                           'http://localhost:8081/api',
                           {
                               "jsonrpc": "2.0",
                               "method": 'user.login',
                               "params": {
                                   "username": vm.login,
                                   "password": vm.password
                               },
                               "id": 1
                           }
                       ).then(function(response) {
                           if ('result' in response.data) {
                               vm.server_response_result = response.data['result']; // save server result to data
   
   
                               if ('token' in response.data.result) {
                                   let token = response.data.result['token'];
                                   vm.$emit('emitAccessToken', token); // if receiced access_token then send it to Vue parent data
                                   vm.encodeAccessToken(token);
                               }
                               vm.success_message_status = true;  // inform user that he has successfully logged in
                           }
   
   
                           if ('error' in response.data) {
                               vm.success_message_status = false; // hide success message, if it is displayed
                               vm.error_message_status = true; // show error message
                               vm.$emit('deleteAccessToken'); // delete old access_token from previous login in Vue parent data
   
   
                               if ('data' in response.data.error) { // if we have error text from server, then use it, otherwise use default
                                   vm.error_message_text = response.data.error['data'];
                               }else{
                                   vm.error_message_text = '???????????? ????? ??? ??????';
                               }
                           }else{
                               vm.error_message_status = false; // if we don't get eny error in response, then hide error area
                           }
   
   
                       });
               },
               encodeAccessToken(token){
                  let decodedToken = base64.decode(token);
                  let arr = decodedToken.split('"}');
                   window.console.log(arr);
   
   
               }
           }
       }
   </script>
   
   
   <style scoped>
     .card{
       max-width:300px;
     }
   </style>
   

我没有放置模板代码，但它在那里）

4. 创建配置文件并设置代理

因为后端（：8080）和前端（：8081）在不同的端口上运行，我们使用 vue.config.js 文件来指定代理设置。根据文档，它应该是这样的：

module.exports = {
    devServer: {
        proxy: 'http://localhost:8080',
    }
}

5. 为前端运行开发服务器

   npm 运行服务

6. 然后我在浏览器http://localhost:8081 中加载前端， 我什至可以向后端发出请求，一切正常，浏览器控制台显示来自后端的响应。并且由于 sockJS 插件实时更改也有效（浏览器对我在 IDE 中所做的更改做出反应）

---

接下来是问题部分。 我刷新页面后，显然 websocket 发生了问题，实时编辑的连接丢失，浏览器控制台中的每一秒都会出现这样的错误消息（无限错误循环）：

The connection to ws://10.0.75.1:8081/sockjs-node/724/kqxnh5s0/websocket was interrupted while the page was loading.

与后端的连接继续工作，我仍然可以从中得到响应。因此，控制台中只有无限的错误消息，并且与浏览器的实时同步丢失。

或者，如果我什至不允许通过指定运行网络主机

module.exports = {
    devServer: {
        proxy: 'http://localhost:8080',
        host: 'localhost'
    }
}

问题仍然存在，但看起来不同

The connection to ws://localhost:8081/sockjs-node/603/3loi0dyu/websocket was interrupted while the page was loading.

互联网上充斥着这样的问题，没有人真正提出任何解决方案。总是建议打开 Chrome 或“它是 FF，但很快就会修复”。任何人都可以提出建设性的建议吗？

这些是每秒出现的 2 个响应

200 响应代码

101响应码

Answer 1

我搜索了一段时间后发现了这个问题，但找不到答案。我认为你很接近，但你所做的事情有点不同。

我为修复控制台中的无限错误消息所做的工作是将其添加到我的 vue.config.js 中。理论上它只是 devServer 行，但我不确定这是否足够。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === 'production'
      ? '/'
      : 'http://localhost:8081/',
  devServer: {
    host: "localhost"
  }
})

重新启动开发服务器后，它显示两个地址都设置为“localhost”。根据您运行应用程序的方式设置正确的端口非常重要。

      App running at:
  - Local:   http://localhost:8081/ 
  - Network: http://localhost:8081/