前端 socket.io 跨域

在使用Socket.io进行前端跨域通信时，可以通过设置Socket.io的cors选项来允许跨域请求。
以下是一个简单的例子，展示了如何在Node.js的服务器代码中配置Socket.io以允许跨域连接：

const express = require('express');
const http = require('http');
const socketIO = require('socket.io');// 创建一个Express应用和HTTP服务器
const app = express();
const server = http.createServer(app);// 创建Socket.io服务器并绑定到HTTP服务器上
const io = socketIO(server, {cors: {origin: "http://your-frontend-domain.com", // 允许跨域的前端域名methods: ["GET", "POST"], // 允许的跨域请求方法transports: ['websocket', 'polling'], // 允许的跨域通信传输方式credentials: true // 允许cookies等认证信息一起跨域传递}
});// 监听客户端连接
io.on('connection', (socket) => {console.log('A client has connected');// 定义处理消息的回调函数socket.on('message', (data) => {console.log('Received message:', data);// 发送消息回客户端socket.emit('message', 'Hello, client!');});// 定义处理disconnect的回调函数socket.on('disconnect', () => {console.log('A client has disconnected');});
});// 启动服务器
server.listen(3000, () => {console.log('Server is running on port 3000');
});

前端代码使用Socket.io客户端连接到服务器：

const socket = io('http://your-backend-domain.com:3000', {transports: ['websocket', 'polling'],withCredentials: true
});socket.on('connect', () => {console.log('Connected to the server');
});socket.on('message', (data) => {console.log('Received message:', data);
});// 发送消息到服务器
socket.emit('message', 'Hello, server!');

确保替换your-frontend-domain.com和your-backend-domain.com:3000为实际的前端和后端域名和端口号。