问题描述
前端使用 socket.io 进行实时通信时，可能会遇到跨域问题。例如，当客户端运行在 http://localhost:3000/ 上，而服务端运行在 http://localhost:4000/ 上时，将无法建立连接。
解决方案
为了解决跨域问题，我们可以采用以下两种方法。
方法一：设置跨域选项
可以通过设置 cors 选项来允许 socket.io 跨域访问。在服务端代码中加入以下代码：
----- -- - ---------------------------- -
----- -
------- ------------------------
-------- ------- -------
-
---上述代码指定允许的跨域地址为 http://localhost:3000，允许的 HTTP 方法为 GET 和 POST。这样就能够允许来自此地址的请求。如果有多个允许的地址，可以使用数组：
----- -- - ---------------------------- -
----- -
------- ------------------------- ----------------------
-------- ------- -------
-
---方法二：使用代理
另一种方法是使用代理，在客户端代码中加入以下代码：
----- ------ - --------------------------- -
----- -------------
----------- --------------
------------- -
------------------- ----------
-
---
----------------------- - ------------
------------------- - -----上述代码将客户端的请求转发到本地 http://localhost:3000 地址。在服务端代码中，只需要监听默认的地址即可。
----- -- - -----------------------------
注意事项
无论是哪种解决方案，在设置跨域选项时，应该仅允许必要的来源，并限制允许的 HTTP 方法。这样可以减少跨站脚本攻击（XSS）和恶意请求的风险。
示例代码
完整的客户端及服务端示例代码如下：
-- -----
----- ------ - --------------------------- -
----- -------------
----------- --------------
------------- -
------------------- ----------
-
---
----------------------- - ------------
------------------- - -----
-------------------- -- -- -
-------------------------
---
-------------------- ------ -- -
--------------------- ---------- ------
---
---------------------- ------- ---------
-- -----
----- ---- - ----------------
----- ------ - --------------------
--------------------
----- -- - -----------------------------
------------------- -------- -- -
-------------- ------ ------------
-------------------- ------ -- -
--------------------- ---------- ------
---------------------- ---- ----------
---
----------------------- -- -- -
-------------- ------ ---------------
---
---总结
跨域问题是使用 socket.io 进行实时通信时常见的问题，但是通过设置跨域选项或使用代理可以很容易地解决。在设置跨域选项时，应该仅允许必要的来源，并限制允许的 HTTP 方法以降低风险。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652923807d4982a6ebbb00a0