Socket.io 是一个适用于 Web 应用程序的实时双向通信库，它可以在浏览器和服务器之间建立稳定的通信连接，支持实时消息传递、文件传输、事件触发等功能。然而，在使用 Socket.io 进行跨域通信时，可能会遇到跨域问题，本文将详细介绍 Socket.io 的 CORS 跨域问题，并提供解决方案。
什么是跨域问题
跨域问题是浏览器的一种安全机制，主要用于防止恶意网站通过脚本窃取用户数据或进行攻击。当浏览器请求一个与当前页面所在域名不同的资源时，浏览器会采用同源策略禁止该请求，即不允许跨域请求。
Socket.io 的 CORS 跨域问题
由于 Socket.io 基于 WebSocket 协议进行通信，而 WebSocket 是一种新型的协议，与 HTTP 不同，没有同源限制。因此，在使用 Socket.io 进行跨域通信时，可能会遇到 CORS 跨域问题。
CORS (Cross-Origin Resource Sharing) 是浏览器通过 HTTP 头部来告诉服务器，哪些源站点有权限访问当前资源。当 Socket.io 服务器没有配置正确的 CORS 相关响应头时，就会导致浏览器出现 CORS 跨域错误，无法建立稳定的 WebSocket 连接。
解决 Socket.io 的 CORS 跨域问题
要解决 Socket.io 的 CORS 跨域问题，需要在 Socket.io 服务器端设置正确的 CORS 响应头，在 Socket.io 客户端端设置正确的 CORS 请求头。下面是具体的解决方案和示例代码。
在 Socket.io 服务器端设置 CORS 响应头
在 Socket.io 服务器端设置 CORS 响应头，可以通过 Express 的 cors 中间件来实现。cors 中间件为每个请求添加 Access-Control-Allow-Origin 头来支持 CORS，可以设置允许访问的域名或使用通配符 *，表示允许来自任何域的请求。
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ------ - ----------------------------
----- -- - -----------------------------
----- ---- - ----------------
---------------- -- -- ---- ---
------------------- -------- -------- -
---------------------- ------------- -----------
---------------------- ------------
-------------------- -------- ----- -
--------------------- ---------- -----
-------------------------------- -----
---
---
------------------- -------- -- -
---------------------- ------ -- --------- -- ---- --------
---在 Socket.io 客户端端设置 CORS 请求头
在 Socket.io 客户端端设置 CORS 请求头，可以使用 Socket.io 客户端 API 中的 withCredentials 选项来实现。withCredentials 选项表示允许发送跨域 Cookie，需要设置为 true。
-- -------------------- ---- -------
----- ------ - --------------------------- -
---------------- ---- -- ---- ------
---
-------------------- -------- ----- -
--------------------- ---------- -----
---
---------------------- ------- -------------总结
本文介绍了 Socket.io 的 CORS 跨域问题，用 Express 的 cors 中间件启用 CORS，在 Socket.io 客户端 API 中使用 withCredentials 选项发送跨域 Cookie，可以有效解决 Socket.io 的跨域问题。这种方法不仅适用于 Socket.io，也适用于其他基于 WebSocket 的通信方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648f9c6248841e9894dcc0ec