博客

vue-socket.io跨域问题有效解决方法

  • Post category:http

下面我将详细讲解“vue-socket.io跨域问题有效解决方法”的完整攻略。

1. 问题描述

在使用vue和socket.io进行开发的过程中，可能会遇到跨域问题。具体表现为，当使用前端http://localhost:8080访问后端http://localhost:3000时，会在控制台中出现如下错误信息：

Access to XMLHttpRequest at 'http://localhost:3000/socket.io/?EIO=3&transport=polling&t=1630211352888-0' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

2. 解决方案

解决跨域问题比较多，下面介绍一种较为简单的方法。

2.1 安装cors模块

在后端中使用cors模块，用于允许跨域请求。

npm install --save cors

2.2 引入cors模块

在后端代码中引入cors模块。

const cors = require('cors')

app.use(cors());

2.3 修改socket io连接地址

在前端和后端的socket io连接代码中修改连接地址，将地址中的http://改为ws://。

示例一

前端代码：

import Vue from 'vue'
import VueSocketIO from 'vue-socket.io'
import io from 'socket.io-client'

Vue.use(
  new VueSocketIO({
    debug: true,
    connection: io('ws://localhost:3000')
  })
)

后端代码：

const io = require('socket.io')(server, {
  cors: {
    origin: '*'
  }
})

io.on('connection', (socket) => {
  console.log('a user connected')
})

server.listen(port, () => {
  console.log(`Server running on port ${port}...`)
})

示例二

前端代码：

import Vue from 'vue'
import VueSocketIO from 'vue-socket.io'
import io from 'socket.io-client'

Vue.use(
  new VueSocketIO({
    debug: true,
    connection: io('ws://localhost:3000', {
      transports: ['websocket', 'polling']
    })
  })
)

后端代码：

const io = require('socket.io')(server, {
  cors: {
    origin: '*'
  }
})

io.on('connection', (socket) => {
  console.log('a user connected')
})

server.listen(port, () => {
  console.log(`Server running on port ${port}...`)
})

3. 总结

以上就是本文介绍的“vue-socket.io跨域问题有效解决方法”的完整攻略。通过引入cors模块，并将socket io连接地址中的http://改为ws://，即可有效解决跨域问题。希望对大家有所帮助！

Tags: