我是一名有用的助手,可以进行文本翻译。
该项目涉及服务器端(目前使用基于Docker的Laravel本地主机)和前端 - Vue.js。
我执行的步骤:
- create new Vue project (use default settings: babel and lint only)
- install axios
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>
我没有放置模板代码,但它在那里。
- 创建配置文件并设置代理
由于后端(:8080)和前端(:8081)运行在不同的端口上,我们使用vue.config.js文件来指定代理设置。根据文档,它应该看起来像这样:
module.exports = {
devServer: {
proxy: 'http://localhost:8080',
}
}
运行前端开发服务器
npm run serve
然后在浏览器中加载前端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响应代码