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 ...
随机推荐
- 论文阅读笔记---HetConv
1 写在前边的话 HetConv性能:当使用HetConv取代标准卷积之后,FLOPs大概是之前的1/8到1/3,更重要的是精度几乎不变!!! 论文地址:https://arxiv.org/abs/1 ...
- 2018-8-10-win10-uwp-验证输入-自定义用户控件
title author date CreateTime categories win10 uwp 验证输入 自定义用户控件 lindexi 2018-08-10 19:16:51 +0800 201 ...
- printk函数速率限制
如果你不小心, 你会发现自己用 printk 产生了上千条消息, 压倒了控制台并且, 可能地, 使系统日志文件溢出. 当使用一个慢速控制台设备(例如, 一个串口), 过量的消息速率也 能拖慢系统或者只 ...
- [Ceoi2016|BZOJ4936] Match
哈希+分治+stack 题目: 给你一个由小写字母组成的字符串s,要你构造一个字典序最小的(认为左括号的字典序比右括号小)合法的括号 序列与这个字符串匹配,字符串和括号序列匹配定义为:首先长度必须相等 ...
- Android开发 从代码里设置Drawable图片不显示的问题
问题描述 我们从代码里获得Drawable在设置给View时会发现,图片不显示的问题.比如如下代码: Drawable drawable = getResources().getDrawable(R. ...
- 运行 composer update,提示 Allowed memory size of bytes exhausted
composer update运行之后,提示 PHP Fatal error: Allowed memory size of 1610612736 bytes exhausted (tried to ...
- 用hexo在本地搭建自己的博客
参考路径:https://blog.csdn.net/Hoshea_chx/article/details/78826689
- AutoIt自动化编程(3)【转】
模拟鼠标点击(按钮等)控件 既然是模拟用户操作,自然就包括了模拟鼠标点击在内. 适用命令/函数:Click/MouseClick/ControlClick 其中Click/MouseClick用来模拟 ...
- 《你不知道的javascript》上卷笔记整理(一)
函数声明和变量声明都会被提升,但函数声明会被提升到普通变量前,而 var foo = function bar(){}; 赋值操作不会被提升. 闭包: 基于词法作用域(作用域是根据名称查找变量的一套规 ...
- localStorage,sessionStorage,cookie区别
localStorage:HTML5新增的在浏览器端存储数据的方法.设置和获取localStorage的方法: 设置: localStorage.name = 'zjj'; 获取: localStor ...