使用 express + vue 开发 socket.io 跨域踩坑

1. 跨域问题

• VUE插件配置： 安装 socket.io-client 解决。
  • 如果使用script引入，不需要考虑这个问题，如果使用 vue-socket.io 则需要使用此方法。
  • 原因：Socket.io不是Websocket，它只是将Websocket和轮询 （Polling）机制以及其它的实时通信方式封装成了通用的接口，并且在服务端实现了这些实时机制的相应代码。也就是说，Websocket仅仅是 Socket.io实现实时通信的一个子集。因此Websocket客户端连接不上Socket.io服务端，当然Socket.io客户端也连接不上Websocket服务端。

import VueSocketIO from "vue-socket.io"
import ClientSocketIO from "socket.io-client"

Vue.use(
  new VueSocketIO({
    debug: true,
    connection: ClientSocketIO.connect("http://localhost:3000"),  // 关键配置
    options: { path: "/" }, //Optional options
  })
)


- 服务器配置

方法1:
const io = socket_io(server, {cors:true});

方法2:
const io = socket_io(server, {
    cors:{
       origin: "http://localhost:8082"
    }
});

方法3: **指定多个网址的时候，需要使用数组**。
const io = socket_io(server, {
    cors:{
       origin: ["http://localhost:8082","http://127.0.0.1:8082"]
    }
});