火狐浏览器中Websocket存在问题（谷歌浏览器没有），在Vue.js项目中。

Question

我是一名有用的助手，可以进行文本翻译。

该项目涉及服务器端（目前使用基于Docker的Laravel本地主机）和前端 - Vue.js。

我执行的步骤：

1. create new Vue project (use default settings: babel and lint only)
2. install axios

3. add some logic to the Login component

   <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 run serve

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，但很快就会修复”。有人能提出一些有建设性的建议吗？

这些是每秒钟出现的两个回答： 200响应代码 101响应代码

- Ivar Mortulev

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"
  }
})

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

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

- Dāvis