浅谈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


猜你喜欢
- Python 通过微信邮件实现电脑关机,供大家参考,具体内容如下通过手机微信发送QQ邮件给sina邮箱,然后利用python的pop3定时检
- 目录1. 递归函数与回溯深搜的基础知识2. 求子集 (LeetCode 78)3. 求子集2 (LeetCode 90)4. 组合数之和(L
- 1.SQL Server 2005中的存储过程并发问题问:我在SQL Server2005中遇到了并发问题。我持有车票的公共汽车上有一些空闲
- 在平时的工作中,我们经常会遇到需要批量创建文件的情况,例如,汇总一个月中每天回复问题的文件等,这里,我们以如何使用当前日期时间创建文件为例:
- Python 面向对象Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是很容易的。本章节我们将
- 实例如下所示:# -*-coding:utf-8-*-import osfile_obj = open("test2.txt&qu
- 本文实例为大家分享了js+ajax分页组件的具体代码,供大家参考,具体内容如下1.定义分页组件DOM<div id="pag
- 前言这期文章我就为大家介绍关于python的艺术美——画图神器在数学中有一种美,叫几何美,我们又称为
- 我就废话不多说了,大家还是直接看代码吧~'''Created on 2018-4-16'''
- 一,利用键盘响应,在不刷新本页面的情况下验证表单输入是否合法用户通过onkeydown和onkeyup事件来触发响应事件。使用方法和oncl
- if条件分支1. if语句基本用法if boolean_value:子代码模块11)判断条件 boolean_value是if语句判断条件
- 最近做一个车牌识别项目,入门级别的,十分简单。车牌识别总体分成两个大的步骤:一、车牌定位:从照片中圈出车牌二、车牌字符识别这里只说第二个步骤
- 上下文管理器是一种 Python 构造,它提供了一个类似 try-finally 的环境,具有一致的接口和方便的语法,例如通过&ld
- Protobuf是google开发的一个序列化和反序列化的协议库,我们可以自己设计传递数据的格式,通过.proto文件定义我们的要传递的数据
- 守护进程模式使用python开发后台服务程序的时候,每次修改代码之后都需要重启服务才能生效比较麻烦。看了一下Python开源的Web框架(D
- 本文实例讲述了PHP实现绘制二叉树图形显示功能。分享给大家供大家参考,具体如下:前言:最近老师布置了一个作业:理解并实现平衡二叉树和红黑树,
- 一. 官网下载MySQL官方网址:(https://www.mysql.com/) 或者点击这里下载:https://www.jb
- 1、打开一个记事本,将需要安装的第三方python依赖包写入文件,比如:需要安装urllib3、flask、bs4三个python库(替换成
- 超文本传输协议http构成了万维网的基础,它利用URI(统一资源标识符)来识别Internet上的数据,而指定文档地址的URI被称为URL(
- 本文为大家分享了python爬取酷狗音乐排行榜的具体代码,供大家参考,具体内容如下#coding=utf-8from pymongo imp