Проблема с веб-сокетом в Firefox (не в Chrome) в проекте Vue.js

Question

Проект подразумевает серверную часть (теперь это Laravel на localhost через докер) и лицевую сторону - Vue.js.

Шаги, которые я выполняю:

1. createновый проект 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>
   

Я не разместил код шаблона, но его там)

Создание файла конфигурации и настройка прокси

Поскольку backend (: 8080) и frontend (: 8081) работают на разных портах, мы используем файл vue.config.js, в котором мы указываем настройки прокси.На основании документации это должно выглядеть примерно так:

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

Запустить dev-сервер для фронта

npm run serve

Затем я загружаю фронтенд в браузер http://localhost:8081 И я могу дажесделать запросы к бэкэнду, и все работает нормально, консоль браузера отображает ответ от бэкенда.И благодаря плагину sockJS изменения в реальном времени также работают (браузер реагирует на изменения, которые я сделал в IDE)

---

Далее идет проблемная часть. Как только яобновите страницу, очевидно, что-то не так происходит с веб-сокетом, и теряется соединение редактирования в реальном времени, и каждую секунду в консоли браузера появляются сообщения об ошибках, подобные этому (бесконечный цикл ошибок):

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

Соединение сБэкэнд продолжает работать, я все еще могу получить ответ от него.Так что это только бесконечные сообщения об ошибках в консоли и потеря синхронизации с браузером в реальном времени.

Или, если я даже не разрешаю запускать Network Host, указав

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 код ответа