Socket.io 是一个基于 Node.js 的实时应用程序框架，提供了双向数据通信功能。前端可以使用 Socket.io 客户端与服务端建立连接，实现实时数据传输。
但是，在某些情况下，前端 Socket.io 客户端需要通过跨域请求连接服务端。本文将详细介绍前端 Socket.io 客户端如何通过跨域请求连接服务端的方式，并提供示例代码。
什么是跨域请求？
跨域请求是指浏览器在向服务器请求资源时，请求的资源与当前页面的域名不同。比如，当前页面的域名是 http://www.example.com，而请求的资源的域名是 http://api.example.com。
由于浏览器的同源策略，当前页面无法直接访问请求的资源。需要通过一些特殊的手段，如 JSONP、CORS 等方式来实现跨域请求。
在 Socket.io 中，如果服务端与前端页面不在同一个域名下，需要通过跨域请求来连接服务端。
如何通过跨域请求连接 Socket.io 服务端？
通过跨域请求连接 Socket.io 服务端，需要在客户端代码中设置一些参数。
1. 设置连接地址
在客户端 Socket.io 连接服务端之前，需要设置连接地址。如果服务端与前端页面不在同一个域名下，需要在连接地址中指定服务端的域名。
const socket = io.connect('http://api.example.com');2. 设置跨域参数
在客户端 Socket.io 连接服务端时，需要设置一些跨域参数。
首先，需要设置 withCredentials 参数为 true，将请求头中的 Cookie 发送给服务器。这样，服务端就可以在跨域请求中获取到客户端的 Cookie，实现跨域身份验证。
另外，还需要设置 transports 参数为 ['websocket']，表示仅使用 WebSocket 协议连接服务端。
const socket = io.connect('http://api.example.com', {
withCredentials: true,
transports: ['websocket'],
});3. 设置 CORS 策略
如果服务端使用了 CORS 策略限制跨域请求，客户端还需要设置 CORS 相关参数。具体设置方法请参考 CORS 官方文档。
示例代码
以下是一个简单的示例代码，演示了前端 Socket.io 客户端如何通过跨域请求连接服务端。
在该示例中，服务端使用 Node.js 和 Socket.io 实现，并将监听在 8000 端口。
-- -------------------- ---- -------
-- -----
----- -- - ---------------------------
------------------- -------- -- -
-------------- ---- ------------
---------------------- - -------- -------- -- --------- ------- ---
----------------------- -- -- -
----------------- ---------------
---
---
-- -----
----- ------ - ------------------------------------ -
---------------- -----
----------- --------------
---
-------------------- ------ -- -
--------------------------
---结论
通过以上步骤，前端 Socket.io 客户端可以轻松地通过跨域请求连接服务端，实现数据的实时传输。
同时，需要注意的是，在设置跨域参数时，需要谨慎地选择参数值，以保证安全和性能。在实际开发中，还需要结合具体的业务场景来设置跨域参数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6723405a2e7021665e0f1594