vue.js - Vue.js 项目中 Firefox（不是 Chrome）中的 Websocket 问题

问题描述

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

我执行的步骤：

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

向 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>

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

创建配置文件并设置代理

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

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

为前端运行开发服务器

npm 运行服务
然后我在浏览器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响应码

标签： vue.jswebsocket

vue.js - Vue.js 项目中 Firefox（不是 Chrome）中的 Websocket 问题

问题描述

解决方案

推荐阅读