使用socket.io遇到跨域问题 记录一下

在使用node中使用了socket为了搭建一个聊天室。代码如下，端口3000

const server = app.listen(3000)
require('./socket/socket')(server)

module.exports = app =>{
    const io = require('socket.io')(app,{cors:true})

    console.log('io服务开启')
    const moment = require('moment')
    let list = []
    const message = []

    io.on('connection',socket=>{
        console.log('有人连接')

        let user = ''
        socket.on('login',obj=>{

            list.push(obj)

            user = obj

            io.emit('person',list)

            io.emit('enter',`欢迎${user.name}进入聊天室！`)
        })
        
        socket.on('message',obj=>{
            message.push({user,message:obj})
            const date = new Date()
            const time = {
                date:moment(date).format('YYYY年MM月DD日'),
                time:moment(date).format('HH:mm:ss'),
                init:date.getTime()
            }
            io.emit('message',{time,user,message:obj})
        })
        socket.on('disconnect',obj=>{
            console.log('leave')
            
            if(user) list = list.filter(r=>r.id!==user.id)
            
            io.emit('person',list)

            io.emit('enter',`${user.name}离开了聊天室！`)
        })
    })


}

然而在vue中使用它时就会出现跨域问题截图我就不放了，报错和你的一样。

我刚开始使用socket.io是这样的

• 安装依赖

npm i socket.io -s
npm i vue-socket.io -s

• 使用

import SocketIO from "socket.io-client";
import vueSccketIO from "vue-socket.io";

Vue.use(
  new vueSccketIO({
    debug: true,
    connection: SocketIO("ws://localhost:3000")
  })
);

• 现在去访问一下 发现跨域了 我试了网上无数的方法都没用 大部分都教你使用代理的
• 其实我在node中的第一行已经配置了跨域

const io = require('socket.io')(app,{cors:true})

没错就是cors:true

然而vue中使用还是跨域 然后我去翻了一下官方文档 居然被我找到了原因

• vue-socket.io github
• 我在上面看见一句这样的话：Vue-Socket.io is a socket.io integration for Vuejs, easy to use, supporting Vuex and component level socket consumer managements
• 翻译一下就是 vue-socket.io其实是socket.io的封装

import SocketIO from “socket.io-client”;
还记得上面这个引入吗
我们安装依赖的时候安装的是socket.io这个包
这个包中包含了socket.io-client但是与我们要用的不同

知道了问题 解决方案就出来了

npm uninstall socket.io 
npm i socket.io-client -s

现在再回去看看是不是已经解决了呢

如果解决了你的问题请给我一个赞吧！