socket.io出现Cross-Origin request Blocked跨域错误如何解决？

问题根源 #

你遇到的是跨域资源共享(CORS)限制问题：前端静态页面运行在live-server默认的http://localhost:8080端口，Socket.io后端服务运行在http://localhost:3000端口，端口不同属于跨域场景，浏览器默认会拦截这类跨域请求。

解决方案 #

你前端引入的Socket.io版本为2.3.0，需要先确认后端安装的Socket.io大版本和前端匹配，再对应配置跨域规则：

情况1：后端安装的是Socket.io 2.x版本 #

修改root/server/server.js的初始化代码，添加跨域允许规则：

const io = require('socket.io')({
  // 此处填写你前端实际运行的访问地址
  origins: "http://localhost:8080"
});

io.on('connection', client =>{
  client.emit('init', {data:'hello'});
});

io.listen(3000);

修改后重启后端服务即可。

情况2：后端安装的是Socket.io 3.x/4.x版本 #

有两种处理方式可选：

方式1：降级后端版本和前端匹配

在server文件夹下执行如下命令，重装对应版本的Socket.io：

yarn remove socket.io
yarn add socket.io@2.3.0

重装完成后按照上面情况1的配置修改server.js即可。

方式2：升级前端版本并适配新版配置

1. 修改root/frontend/index.html中的Socket.io CDN引用，替换为和后端匹配的3.x/4.x版本，示例如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.0/socket.io.min.js"></script>

2. 修改root/server/server.js的初始化代码，添加新版跨域配置：

const io = require('socket.io')({
  cors: {
    // 此处填写你前端实际运行的访问地址
    origin: "http://localhost:8080",
    methods: ["GET", "POST"]
  }
});

io.on('connection', client =>{
  client.emit('init', {data:'hello'});
});

io.listen(3000);

修改完成后分别重启前后端服务即可。

内容的提问来源于stack exchange，提问作者Monochromatic