vue socketio如何使用及跨域问题
我的后端使用的flask_socketio做服务端 前端使用的vue_socketio当客户端
vue.config.js配置
module.exports = {
outputDir: process.env.outputDir,
assetsDir: 'static',
publicPath: '/',
devServer: {
open: false,
host: '0.0.0.0',
port: 8001,
https: false,
hotOnly: false,
//配置代理
proxy: {
//以'/api'开头的接口会转接到下面的target的ip
'/api': {
target: 'http://127.0.0.1:5000', // target host
changeOrigin: true, // needed for virtual hosted sites
ws: false, // proxy websockets
pathRewrite: {
//路径重写
'^/api': '/api/', // rewrite path
},
logLevel: 'debug'
},
'/socket.io': {
target: 'http://127.0.0.1:5000', // target host
changeOrigin: true, // needed for virtual hosted sites
logLevel: 'debug'
}
}
}
}
在任意的.vue文件中建立连接
let socket = io({
reconnection: true,
forceNew: true,
transports: ['websocket'],
})
socket.on('connect', function () { //连接成功绑定的事件
console.log('connect');
socket.emit('my event', {data: 'I\'m connected!'});
});
socket.on('news', function (data) { //后台提供的事件名
console.log('2222222222222')
console.log(data)
})
vue socketio如何使用及跨域问题的更多相关文章
- 解决Django+Vue前后端分离的跨域问题及关闭csrf验证
前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道 在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了 ...
- nginx处理vue打包文件后的跨域问题
起因 在vue文件打包后,项目脱离了vue配置的反向代理配置,还是会报跨域的错误,或者直接打不开本地文件, 但是此刻我们想打开打包后的文件,测试一下文件有没有错误,因为经常会存在开发阶段没有问题,打包 ...
- vue 开发和生产的跨域问题
开发阶段 在开发环境与后端调试的时候难免会遇到跨域问题,在 vue 项目中常用的是 proxyTable,这个用起来很方便. 打开 config 文件夹下面的 index.js,找到 dev 开发模式 ...
- 从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Vue+webpack项目中实现跨域的http请求
目前Vue项目中对json数据的请求一般使用两个插件vue-resource和axios, 但vue-resource已经不再维护, 而axios是官方推荐的且npm下载量已经170多万,github ...
- [vue] [axios] 设置代理实现跨域时的纠错
# 第一次做前端工程 # 记一个今天犯傻调查的问题 -------------------------------------------------------------------------- ...
- VUE系列三:实现跨域请求(fetch/axios/proxytable)
1. 在 config/index.js 配置文件中配置proxyTable 'use strict' // Template version: 1.3.1 // see http://vuejs-t ...
- vue配置二级目录&vue-axios跨域办法&谷歌浏览器设置跨域
一.根据官方建议,dist打包的项目文件放在服务器根目录下,但是很多时候,我们并不能这样做,当涉及到二级目录设置多层深埋的时候,就需要在webpack配置文件里去设置一下了. 在webpack.con ...
- Nginx+Springboot+Vue 前后端分离 解决跨域问题
1:前端vue 写完 打包 npm run build prod 2: 后端api 写完打包 springboot mvn package -Dmaven.test.skip=true 3: ngin ...
随机推荐
- 【LGP5349】幂
题目 比较厉害的题目了 求 \[\sum_{i=0}^{\infty}\sum_{j=0}^nf_ji^jr^i\] 改变一下求和顺序 \[\sum_{j=0}f_j\sum_{i=0}^{\inft ...
- Ubuntu环境下使用Maven编译并打包Java项目
一.安装Maven 打开终端输入以下指令: $ mvn -v Apache Maven Maven home: /usr/share/maven Java version: 1.8.0_181, ve ...
- eclipse 克隆 https 地址的 Git 仓库报错:cannot open git-upload-pack
解决方法:Window >Preferences >Team>Git>User settings点击Add Entry设置key:http.sslVerify value:fa ...
- 【颓废篇】人生苦短,我用python(一)
谁渴望来一场华(ang)丽(zang)的python交易! 最近突然产生了系统学习python的想法. 其实自从上次luogu冬日绘板dalao们都在写脚本就有这种想法了. 最近被计算几何势力干翻的我 ...
- WPF 先显示登录成功,验证成功后显示主窗口
/// 设置显示登录窗口的方法: /// 在 App.xaml 中把这句 /// 删掉 StartupUri="MainWindow.xaml" 改为 StartupUri=&qu ...
- 介绍一下再Apache下的Tomcat负载均衡的一些使用问题
在负载均衡技术中,硬件设备是比较昂贵的,对于负载均衡的学习者如果不是在企业中应用或者是学员中学习,很少有机会能碰到实际操作的训练.(http://xz.8682222.com)所以,很多朋友都会选择软 ...
- token 与 基于JWT的Token认证
支持跨域访问,无状态认证 token特点 支持跨域访问: Cookie是不允许垮域访问的,这一点对Token机制是不存在的,前提是传输的用户认证信息通过HTTP头传输 无状态(也称:服务端可扩展行): ...
- JUC 一 CopyOnWriteArrayList 和 CopyOnWriteArraySet
java.util.concurrent; 简介 CopyOnWriteArrayList是一个线程安全的ArrayList,通过内部的volatile数组和显式锁ReentrantLock来实现线程 ...
- 【breathandlife】气势磅礴、比较好听的旋律有哪些?
[breathandlife]气势磅礴.比较好听的旋律有哪些? 分享:yunbest作者:来源:2015-10-26 专题:breathandlife [breathandlife]气势磅礴.比较好听 ...
- csdn阅读更多自动展开插件
点击获取 当然也可以自己写脚本.写js.