浅谈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();
}
});
满心欢喜的重启前台看下有没有脸上。
结果出现了一下错误
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,请前后端一致。
来源:https://blog.csdn.net/T1014216852/article/details/79902759
猜你喜欢
- 昨天又翻了下前段时间WD内部培训的幻灯片,发现了kejun推荐的一篇好文:Javascript Closures,看了之后受益匪浅。这篇文章
- 前言:字体反爬是什么个意思?就是网站把自己的重要数据不直接的在源代码中呈现出来,而是通过相应字体的编码,与一个字体文件(一般后缀为ttf或w
- 一、前言 需求是获取某个时间范围内每小时数据和上小时数据的差值以及比率
- 这篇文章主要介绍了python异常处理try except过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价
- 安装MySQL ODBC驱动官方说法:MySQL ODBC 驱动程序负责在开放式数据库连接 API (ODBC API) 的帮助下访问 My
- 场景说明假设有一个mysql表被水平切分,分散到多个host中,每个host拥有n个切分表。 如果需要并发去访问这些表,快速得到查询结果,
- PHP 中文工具类,支持汉字转拼音、拼音分词、简繁互转。PHP Chinese Tool class, support Chinese pi
- 在注册或购物车结帐的时候,需要用户填入个人资料,这个环节可以简练一下,我们只需客人填入邮政编码,然后就根据这个邮政编码,自动从数据库中取出相
- 使用 ProcessPoolExecutorfrom concurrent.futures import ProcessPoolExecut
- 在安装tensorflow完成后,import tensorflow as tf出现问题,问题如下:>>> import
- 昨天简单介绍了SQLAlchemy的使用,但是没有能够涉及其最精彩的ORM部分,今天我将简单说明一下,当然主要还是讲解官方文档的内容,由于是
- 首先检查MySQL 服务没有启动》如果没有启动,则要启动这个服务。有时候安装mysql后使用mysql命令时报错 Can'
- 源码:from pyecharts import Barimport reimport requestsnum=0b=[]for i in
- Windows下ORACLE完全卸载:使用OUI可以卸载数据库,但卸载后注册表和文件系统内仍会有部分残留。这些残留不仅占用磁盘空间,而且影响
- 本文实例总结了Python常用的小技巧。分享给大家供大家参考。具体分析如下:1. 获取本地mac地址:import uuidmac = uu
- 函数使用def base64_to_image(base64_code): img_data = base64.b
- 简介时间序列数据表示一系列特定时间内的数据间隔.如果我们想在机器学习中构建序列预测,那么我们必须处理顺序数据和时间.系列数据是顺序数据的摘要
- 网页上的图片如果设置了alt属性,当鼠标移经时就会有tooltip出现,但是只能显示一行文本,有时需要多行文本,乃至图片来显示图片、链接或者
- 自带验证器1、UniqueValidator用于验证(唯一)unique=True的字段,常用参数:queryset: required,用
- 游标为您提供了在逐行的基础上而不是一次处理整个结果集为基础的操作表中数据的方法。 1.如何使用游标 1)定义游标语句 Declare <