浅谈vue websocket nodeJS 进行实时通信踩到的坑
先说明，我并不知道出现坑的原因是什么。我只是按照别人的写法就连上了。
我的处境是这样的
我的前台是用了 vue 全家桶，启动了一个 9527 端口。
而我的后台是用 nodeJS，启动了 8081 端口。
很明显，这种情况就出现了头疼的跨域。
贴出我的代码，如下
server.js（后台）
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
io.sockets.on('connection', (socket) => {
console.log('123')
});
main.js（前台）
import VueSocketio from 'vue-socket.io'
import socketio from 'socket.io-client'
Vue.use(VueSocketio, socketio('http://localhost:8081'), store)
然后根据网上的写法，我在后端对跨域进行了处理
app.all('*',function (req, res, next) {
res.header('Access-Control-Allow-Origin', 'http://localhost:9527');
res.header('Access-Control-Allow-Headers', 'X-Token, Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
if (req.method == 'OPTIONS') {
res.send(200); /*让options请求快速返回*/
}
else {
next();
}
});
满心欢喜的重启前台看下有没有脸上。
结果出现了一下错误
Failed to load http://localhost:8081/socket.io/?EIO=3&transport=polling&t=MAqqfjf: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. Origin 'http://localhost:9527' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
这个错误。。我看得出是是 “Access-Control-Allow-Credentials” 的问题。所以我又改了后台的跨域代码
app.all('*',function (req, res, next) {
res.header('Access-Control-Allow-Origin', 'http://localhost:9527');
res.header('Access-Control-Allow-Headers', 'X-Token, Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
res.header('Access-Control-Allow-Credentials','true'); // 新增
if (req.method == 'OPTIONS') {
res.send(200); /*让options请求快速返回*/
}
else {
next();
}
});
更改过后，我又满心欢喜的跑去前台，一看
结果就一直报错：
GET http://localhost:8081/socket.io/?EIO=3&transport=polling&t=MAqp7zN 404 (Not Found)
GET http://localhost:8081/socket.io/?EIO=3&transport=polling&t=MAqp7zN 404 (Not Found)
报错了这个是 404 。
百度了很久， 各种关键字都搞不了。最后去 google 了。结果让我找到了答案：
看了上面这个答案，我翻查了一下，正好我也是用 express4 的。所以我就按照他的说法去改。结果如下。
正确的写法
后端
var server = app.listen(8081);
var io = require('socket.io').listen(server);
io.sockets.on('connection', (socket) => {
console.log('123')
});
前端的写法不变。
思考点
虽然我不知道背后发生了什么事（因为是赶项目，赶鸭子上架写 node 和 vue 的，本人是 Java 开发），但是我还是觉得有几个点要注意的：
1、关于 Express 4 和 其他版本中，socketio 的写法不同，少了一个 http 模块。所以我认为是出现这种情况的主要原因
2、注意跨域的写法。四行代码，最好能够保存下来。
3、如果是本地测试的，需要注意 IP 问题。如果是 localhost 的，请前后端一直；如果是 127.0.0.1，请前后端一致。
以上这篇浅谈vue websocket nodeJS 进行实时通信踩到的坑就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue配置生产环境.env.production与测试环境.env.development
这篇文章主要介绍了vue配置生产环境.env.production与测试环境.env.development方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
有时候 vue 无法监听到数据的变化,导致数据变化但是视图没有变化,也就是数据更新了,但在页面上没有显示出来,所以本文给出了三种解决方法,通过代码示例介绍的非常详细,需要的朋友可以参考下2023-12-12
vue中element-ui表格缩略图悬浮放大功能的实例代码
element-ui界面非常简洁和美观，提供的组件可以满足绝大多数的应用场景，当表格中显示了图片的缩略图时，想要鼠标浮动在缩略图上时放大图片的效果，该如何实现呢？下面小编通过实例代码给大家介绍vue中element-ui表格缩略图悬浮放大功能，一起看看吧2018-06-06
下面小编就为大家分享一篇Vue中v-for的数据分组实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家介绍了vue this.$router六种方法使用示例总结分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
今天小编小编就为大家分享一篇Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
在开发项目的时候，我们一般都用 vue-cli 来避免繁琐的 webpack 配置和 template 配置。这篇文章主要介绍了如何写一个 vue 插件,需要的朋友可以参考下2019-06-06
这篇文章主要为大家详细介绍了vue中侦听器使用的相关知识，文中的示例代码讲解详细，具有一定的借鉴价值，有需要的小伙伴可以跟随小编一起学习一下2007-02-02
这篇文章主要介绍了详解VUE中的插值( Interpolation)语法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
这篇文章主要介绍了vue3中Hook使用以及Hook结合自定义指令方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
最新评论