Vue 使用socketio 解决跨域问题

0x01起因:

使用socketio 搭建信令服务器,采用express 和 socketio 作为服务端，参考网上95%的blog，发现出现cors的问题,经过半天的折腾，大部分的帖子都不成功，最后还是在github上参考一个帖子才尝试成功。

const express = require('express');
const  app = express();
const http = require('http').Server(app);
let path = require('path');
var cors = require('cors');

app.use(cors());

const io = require('socket.io')(http,{
cors:{
origin:"http://127.0.0.1:8081",
methods: ["GET","POST"],
credentials: true,
allowEIO3: true
},
transport: ['websocket']
});

io.on('connection', function(socket) {
    console.log('A user connected');
    
    //Whenever someone disconnects this piece of code executed
    socket.on('disconnect', function () {
    console.log('A user disconnected');
    });

    socket.on('login', function (obj) {                
         console.log(obj.username);
              // 发送数据
         socket.emit('relogin', {
                msg: `你好${obj.username}`,
                code: 200
              });  
          });


    });
    
    http.listen(3000, function() {
    console.log('listening on *:3000');
    });

客户端代码

 import VueSocketIO from 'vue-socket.io'
 import SocketIO from 'socket.io-client'
  
  Vue.use(new VueSocketIO({
    debug: true,
    connection: SocketIO('http://127.0.0.1:3000'),
    extraHeaders: {
        'Access-Control-Allow-Credentials':true
    },
    allowEIO3:true,
    vuex: {
        store,
        actionPrefix: 'SOCKET_',
        mutationPrefix: 'SOCKET_'
    },
}));