vue websocket 跨域

在使用 Vue.js 进行 WebSocket 通信时，跨域请求可以通过设置 WebSocket 的路径来解决。具体步骤如下：

1. 在 Vue.js 中安装 `vue-socket.io` 插件，该插件是对 Socket.io 客户端的封装，提供了与 Vue.js 集成的能力。

2. 在组件中引入 `vue-socket.io`：

import VueSocketIO from 'vue-socket.io'

Vue.use(new VueSocketIO({
  debug: true,
  connection: 'http://localhost:3000', // WebSocket 服务器地址
}))

3. 在 WebSocket 服务器端设置允许跨域请求：

const io = require('socket.io')(server, {
  cors: {
    origin: 'http://localhost:8080',
    methods: ['GET', 'POST'],
    allowedHeaders: ['my-custom-header'],
    credentials: true
  }
});

其中，`origin` 属性设置允许跨域请求的域名，`methods` 属性设置允许的请求方法，`allowedHeaders` 属性设置允许的请求头，`credentials` 属性设置是否允许携带 cookie。

4. 在 Vue.js 组件中使用 WebSocket：

this.$socket.emit('message', 'Hello, WebSocket!')

在以上代码中，`$socket` 是 `vue-socket.io` 插件提供的一个全局对象，用于发送 WebSocket 消息。

注意：在开发环境下，Vue.js 服务与 WebSocket 服务可能运行在不同的端口上，因此需要设置 WebSocket 服务器地址为 `http://localhost:3000`（例如以上代码中的 `connection` 属性）。而在生产环境下，两个服务通常运行在同一域名下，因此可以直接使用相对路径来访问 WebSocket 服务器。