我的后端使用的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如何使用及跨域问题的更多相关文章

  1. 解决Django+Vue前后端分离的跨域问题及关闭csrf验证

      前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道   在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了 ...

  2. nginx处理vue打包文件后的跨域问题

    起因 在vue文件打包后,项目脱离了vue配置的反向代理配置,还是会报跨域的错误,或者直接打不开本地文件, 但是此刻我们想打开打包后的文件,测试一下文件有没有错误,因为经常会存在开发阶段没有问题,打包 ...

  3. vue 开发和生产的跨域问题

    开发阶段 在开发环境与后端调试的时候难免会遇到跨域问题,在 vue 项目中常用的是 proxyTable,这个用起来很方便. 打开 config 文件夹下面的 index.js,找到 dev 开发模式 ...

  4. 从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. Vue+webpack项目中实现跨域的http请求

    目前Vue项目中对json数据的请求一般使用两个插件vue-resource和axios, 但vue-resource已经不再维护, 而axios是官方推荐的且npm下载量已经170多万,github ...

  6. [vue] [axios] 设置代理实现跨域时的纠错

    # 第一次做前端工程 # 记一个今天犯傻调查的问题 -------------------------------------------------------------------------- ...

  7. VUE系列三:实现跨域请求(fetch/axios/proxytable)

    1. 在 config/index.js 配置文件中配置proxyTable 'use strict' // Template version: 1.3.1 // see http://vuejs-t ...

  8. vue配置二级目录&vue-axios跨域办法&谷歌浏览器设置跨域

    一.根据官方建议,dist打包的项目文件放在服务器根目录下,但是很多时候,我们并不能这样做,当涉及到二级目录设置多层深埋的时候,就需要在webpack配置文件里去设置一下了. 在webpack.con ...

  9. Nginx+Springboot+Vue 前后端分离 解决跨域问题

    1:前端vue 写完 打包 npm run build prod 2: 后端api 写完打包 springboot mvn package -Dmaven.test.skip=true 3: ngin ...

随机推荐

  1. loj6031「雅礼集训 2017 Day1」字符串

    题目 首先先对\(s\)建一个\(\operatorname{SAM}\),设\(w=kq\) 发现\(k,q\leq 10^5\),但是\(w\leq 10^5\),于是套路地根号讨论一下 如果\( ...

  2. while语句结构(for循环)

    while语句结构(for循环) python for 循环可以遍历任何序列的项目,如一个列表或一个字符串 for循环的一般形式 for 条件判断 in 一个序列: 执行语句 else: 执行语句 可 ...

  3. angularjs 1 Failed to read the 'selectionStart' property from 'HTMLInputElement':

    在找angularjs input(type='number')在获取焦点的时候,文本框内容选中效果,参考了:Select text on input focus,我直接复制他的code之后,在ion ...

  4. Codeforces 839D Winter is here

    链接:CF839D 题目大意 给定一个数组大小为\(n(1\leq n\leq 200000)\)的数组\(a\),满足\(1\leq a_i \leq 1000000\). 选择其中任意\(len\ ...

  5. CF627A Xor Equation

    题意:a+b=s,a^b=x(异或).问有多少有序Z+对(a,b)满足条件. 标程: #include<cstdio> using namespace std; typedef long ...

  6. mysql 多表join

    两个表可以简单地写为 select a.,b. from a left join b on a.id =b.id; 三个以上 select a.,b. from a left join b on a. ...

  7. leetcode-109-有序链表转二叉搜索树

    ---恢复内容开始--- 题目描述: 方法一:O(n) O(n) class Solution: def sortedListToBST(self, head: ListNode) -> Tre ...

  8. g2o学习资料

    g2o下载:https://github.com/RainerKuemmerle/g2o/tree/9b41a4ea5ade8e1250b9c1b279f3a9c098811b5a g2o的基本框架结 ...

  9. springboot导入excel到mysql

    @Controller @RequestMapping(path = "/excel") public class ImportController { @Autowired pr ...

  10. C++ const修饰不同类型的用法

    const取自constant的缩写,本意是不变的,不易改变的意思 一.修饰普通变量 const int a = 7; int b = a;         //正确 a = 8;           ...