flask+vue+socketio建立websocket服务，解决跨域问题

饕餮ing

已于 2023-03-28 14:26:32 修改

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： flask vue.js websocket

于 2023-03-28 12:08:33 首次发布

本文链接：https://blog.youkuaiyun.com/u014220146/article/details/129813072

项目场景：

使用前后端分离，版本为Flask2.2.3, vue2.6.11，在Flask中使用Flask-SocketIO(5.3.3)建立socket服务，然后vue建立socket连接

问题描述

前后分离使用的是不同的端口，在通讯时无法建立socket连接，遇到跨域问题

后端报错：

"GET /socket.io/?EIO=4&transport=polling&t=OScMkDs HTTP/1.1" 400

前端报错：
Access to XMLHttpRequest at '***' from origin 'null' has been blocked by CORS policy:No 'Access-Control-Allow-Origin' header is present on the requested resource.

原因分析：

跨域问题可能由后端引起，也可能由前端引起，跨域其实是为了保护网页的安全，避免跨域攻击
在配置好跨域服务后，还要注意版本的问题

Flask-SocketIO5.0的版本对应的 Javascript socket.IO版本为3.x或4.x

flask作为服务解决跨域需要设置 `cors_allowed_origins='*'`
vue则安装socket.io-client依赖(本人是^4.6.1)，然后使用io实例化连接

解决方案：

flask

socketio = SocketIO(app, cors_allowed_origins=‘*’)

vue

npm install socket.io-client --save
在mounted函数中实例化
this.websocket = io(“http://localhost:8086”);
this.websocket.on(‘server_response’, (msg) => {
console.log(‘server_response------>’, msg.data);
})

vue只需要安装socket.io-client即可，不必额外安装vue-socket.io

其它

有的文章在vue的main.js里面建立连接，并试图解决跨域问题

import VueSocketIO from 'vue-socket.io'

Vue.use(new VueSocketIO({
    debug: true,
    connection: "http://localhost:8086",
    options: {
      autoConnect:false
    }
  })
)

对我来说这样无效，而且应该是登录后才建立websocket连接，不建议在main.js中建立连接