浅谈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 进行实时通信踩到的坑就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue使用websocket的方法实例分析

    本文实例讲述了vue使用websocket的方法.分享给大家供大家参考,具体如下: 最近项目需要使用到websocket 但是框架是vue  网上查阅很多资料 vue-websocket 老是连接不上 索性就不适用封装的插件了,直接使用原生的websocket  我这边需求是 只需要接受就好 不需要发送 代码如下: 爬坑之路:vue里面this指向问题 第一版 使用原生js mounted(){ console.log(this)---------------------------------

  • vue使用svg文件补充-svg放大缩小操作(使用d3.js)

    前言 项目需求是要引入svg文件,然后对里面的元素进行赋值,完了之后还要能够让svg放大缩小,点击查看全屏.针对上一篇文章,进行对svg文件里面的元素进行赋值和放大缩小的补充笔记 svg元素赋值 1. 先看看svg文件的代码 思路:我的想法就是循环拿到里面的id,然后跟后台的数据匹配,然后赋值.因为后台返回的数据id是没有后面的_C和_V 的.所以需要我前端的处理. 2. 前端js代码: onWinResize(item) { // item是后台返回的数据,我数据处理函数是单独写的,没有放在接

  • 解决vue-router 嵌套路由没反应的问题

    先看下route.js //route.js const App = () => import('../App.vue'); const Login = () => import('../component/Login.vue'); const Class = () => import('../component/Class.vue'); const CourseList = () => import('../component/CourseList.vue'); const Co

  • 解决Can't find variable: SockJS vue项目的问题

    用的vue-cli(webpack-simple模板),在开发环境运行(npm run dev),一直都没有问题,突然在ios的safari中调试,出现报错: Can't find variable: SockJS 这是为什么呢? 原来这是webpack(我的版本:3.6.0)的报错,webpack的热加载是采用websocket来通知浏览器实现的, SockJS是一个必须的库. 这个问题属于意外吧,googel的话有很多方式来解决.最简单: 将webpack.config.js中的: devt

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

    先说明,我并不知道出现坑的原因是什么.我只是按照别人的写法就连上了. 我的处境是这样的 我的前台是用了 vue 全家桶,启动了一个 9527 端口. 而我的后台是用 nodeJS,启动了 8081 端口. 很明显,这种情况就出现了头疼的跨域. 贴出我的代码,如下 server.js(后台) var app = express(); var server = require('http').createServer(app); var io = require('socket.io')(serve

  • 浅谈vue中使用编辑器vue-quill-editor踩过的坑

    结合vue+element-ui+vue-quill+editor二次封装成组件 1.图片上传 分析原因 项目中使用vue-quill-editor富文本编辑器,在编辑内容的时候,我们往往会编辑图片,而vue-quill-editor默认的处理方式是直接将图片转成base64格式,导致上传的内容十分庞大,且服务器接受post的数据的大小是有限制的,很有可能就提交失败,造成用户体验差. 引入element-ui 编辑editor.vue文件 <template> <div> <

  • 浅谈python配置与使用OpenCV踩的一些坑

    下载opencv2.4.9(python2.7匹配)后 (1)运行OpenCV 2.4.9.exe: (2)配置Python:将\opencv\build\python\2.7\x64 这个目录下:cv2.pyd 复制到:Python27\Lib\site-packages\目录下: (3)测试:输入import cv2,如报错,说明未安装成功 1.opencv的版本一定要与python的版本匹配,否则是python是无法调用cv2这个模块的. 错误信息:ImportError DLL load

  • 浅谈Vue+Ant Design form表单的一些坑

    浅谈Vue+Ant Design form表单的一些坑

    目录 设置默认值的坑 自定义 v-decorator 组件的坑 最近在用 vue + ant 写项目发现 from 组件的坑还是比较多的 设置默认值的坑 控制台报 Warning: You cannot set a form field before rendering a field associated with the value. You can use getFieldDecorator(id, options) instead v-decorator="[id, options]&q

  • 浅谈vue的踩坑路

    ------>axios模拟get json一直拿不到文件,先把data放到根目录,再去dev-server.js(就是npm执行的那个文件)里面设置静态资源访问路径app.use('/data',express.static('./data')) ... app.use(hotMiddleware) // serve pure static assets var staticPath = path.posix.join(config.dev.assetsPublicPath, config.d

  • 浅谈vue项目4rs vue-router上线后history模式遇到的坑

    此次项目开发完后准备打包,因为hash模式的路径带#看着实在是有点丑,所以采用history模式.因为本次项目属于以前网站重构,但是seo问题,所以需要以前的一些地址路径写,所以vue-router的路径全部重改了.打包后查了网上一大堆,都说要把config里的index.js 里的build里的 assetsPublicPath: '/'改成'./',打包上线发现在hash模式下是没问题的, 但一旦改成history模式,有些动态js文件的路径都是错的.无奈之下死马当活马医,把'./'改回了'

  • 浅谈vue生命周期共有几个阶段？分别是什么？

    一共8个阶段 1.beforeCreate(创建前) 2.created(创建后) 3.beforeMount(载入前) 4.mounted(载入后) 5.beforeUpdate(更新前) 6.updated(更新后) 7.beforeDestroy(销毁前) 8.destroyed(销毁后) vue第一次页面加载会触发哪几个钩子函数? beforeCreate.created.beforeMount.mounted DOM 渲染在哪个周期中就已经完成? mounted 补充知识:记录一次vu

  • 浅谈Vue单页面做SEO的四种方案

    目录 1.Nuxt 服务端渲染应用部署 (SSR服务器渲染) 优势: 不足:(开发中遇到的坑) 2.Nuxt 静态应用部署 优势: 不足: 3.预渲染prerender-spa-plugin 优势: 不足: 4.Phantomjs 针对爬虫做处理 优势: 不足: 总结 众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,通过查找资料,大概有以下4种方法.(本人只用过第一,第三种方案) 1.Nuxt 服务端渲染应用部署 (SSR服务器渲染) 关于服务器渲染:Vue官网介绍 ,

  • 浅谈Vue父子组件和非父子组件传值问题

    本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue <template> <div class='tmpl'> goodsList组件 </div> </template> <style> </style> <script> export default { data() { return{} }, creat

  • 浅谈Vue.js

    vue.js的总体评价"简单却不失优雅,小巧而不乏大匠" Vue.js简介 Vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab,虽然Vue是一个个人项目,但在发展前景上个人认为绝不输于Google的AngularJs,下面我会将Vue与Angular(Angular 1.0+版本)做一些简单的比较. Vue的主要特点就和它官网(http://cn.vuejs.org/)所介绍的那样: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (

随机推荐