浅谈vue websocket nodeJS 进行实时通信踩到的坑

作者:杂乱无章-Jessues 时间:2024-04-10 13:46:38 

先说明,我并不知道出现坑的原因是什么。我只是按照别人的写法就连上了。

我的处境是这样的

我的前台是用了 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();
}
});

满心欢喜的重启前台看下有没有脸上。

结果出现了一下错误

浅谈vue websocket nodeJS 进行实时通信踩到的坑

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();
}
});

更改过后,我又满心欢喜的跑去前台,一看

结果就一直报错:

浅谈vue websocket nodeJS 进行实时通信踩到的坑

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 了。结果让我找到了答案:

浅谈vue websocket nodeJS 进行实时通信踩到的坑

看了上面这个答案,我翻查了一下,正好我也是用 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,请前后端一致。

来源:https://blog.csdn.net/T1014216852/article/details/79902759

标签:vue,websocket,nodeJS,通信
0
投稿

猜你喜欢

  • Vue.js实现一个SPA登录页面的过程【推荐】

    2024-04-26 17:39:41
  • python爬虫框架scrapy下载中间件的编写方法

    2021-10-16 13:37:19
  • golang gorm开发架构及写插件示例

    2024-04-25 13:19:00
  • Oracle如何批量将表中字段名全转换为大写(利用简单存储过程)

    2024-01-22 11:23:41
  • 在Python 3中实现类型检查器的简单方法

    2022-08-13 13:30:30
  • 使用ACCESS做网络版程序的四种解决方案

    2009-01-14 16:22:00
  • Python基于Flask框架配置依赖包信息的项目迁移部署

    2022-03-26 13:54:56
  • 使用BootStrap和Metroui设计的metro风格微网站或手机app界面

    2024-05-02 17:32:09
  • ASP环境中使用QQ纯真版IP数据库QQWry.dat

    2010-02-26 13:35:00
  • python3中确保枚举值代码分析

    2023-05-23 17:47:31
  • Go语言实现的可读性更高的并发神库详解

    2023-07-20 08:03:49
  • 使用Kubernetes集群环境部署MySQL数据库的实战记录

    2024-01-14 15:30:16
  • python下如何让web元素的生成更简单的分析

    2023-01-28 23:46:34
  • matlab画三维图像的示例代码(附demo)

    2023-10-03 11:39:44
  • Python中函数及默认参数的定义与调用操作实例分析

    2022-01-15 05:16:31
  • SQL Server中Table字典数据的查询SQL示例代码

    2024-01-25 13:47:49
  • 详解django自定义中间件处理

    2023-09-30 08:19:12
  • python3 使用traceback定位异常实例

    2023-05-03 12:42:35
  • python3实现飞机大战

    2023-03-03 00:36:18
  • 基于Python Numpy的数组array和矩阵matrix详解

    2022-04-22 10:52:28
  • asp之家 网络编程 m.aspxhome.com