WebSocket 可以解决跨域问题。
原理
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它在建立连接时会进行握手,在握手过程中可以通过设置请求头中的Origin字段来指定请求的来源域。服务器可以根据这个Origin字段来决定是否允许该连接,从而实现对跨域请求的控制。如果服务器允许来自特定域的连接,那么即使客户端和服务器不在同一个域,也可以成功建立 WebSocket 连接并进行通信,不受同源策略的限制。
示例代码
以下是一个简单的使用 WebSocket 进行跨域通信的前端示例代码:
javascript
// 创建WebSocket连接
const socket = new WebSocket('wss://example.com:8080', ['protocol1']);
// 连接成功后的回调
socket.onopen = function () {
console.log('WebSocket连接已建立');
// 发送消息
socket.send('Hello, Server!');
};
// 接收消息的回调
socket.onmessage = function (event) {
console.log('收到服务器消息: ', event.data);
};
// 连接关闭的回调
socket.onclose = function () {
console.log('WebSocket连接已关闭');
};
// 错误处理回调
socket.onerror = function (error) {
console.error('WebSocket错误: ', error);
};
在上述代码中,new WebSocket('wss://example.com:8080', ['protocol1'])尝试建立一个到wss://example.com:8080的 WebSocket 连接,协议为protocol1。如果服务器配置正确,允许该跨域连接,那么就可以成功进行通信。
需要注意的是,服务器端也需要相应地配置以处理跨域的 WebSocket 请求,不同的服务器框架有不同的配置方式。例如,在使用 Node.js 的ws模块时,可以通过设置origin选项来允许特定的域进行跨域连接。
javascript
const WebSocket = require('ws');
const wss = new WebSocket.Server({
port: 8080,
// 允许来自http://localhost:3000的跨域连接
origin: 'http://localhost:3000'
});
wss.on('connection', function (ws) {
console.log('新的WebSocket连接');
ws.on('message', function (message) {
console.log('收到消息: ', message);
ws.send('消息已收到');
});
ws.on('close', function () {
console.log('WebSocket连接关闭');
});
});
上述服务器端代码使用ws模块创建了一个 WebSocket 服务器,监听在 8080 端口,并允许来自http://localhost:3000的跨域连接。当有客户端连接时,会处理客户端发送的消息,并向客户端发送响应。