「问题解决」如何解决 socket.io 的跨域问题？-JavaScript中文网-JavaScript教程资源分享门户

问题描述

前端使用 socket.io 进行实时通信时，可能会遇到跨域问题。例如，当客户端运行在 http://localhost:3000/ 上，而服务端运行在 http://localhost:4000/ 上时，将无法建立连接。

解决方案

为了解决跨域问题，我们可以采用以下两种方法。

方法一：设置跨域选项

可以通过设置 cors 选项来允许 socket.io 跨域访问。在服务端代码中加入以下代码：

const io = require("socket.io")(server, {
  cors: {
    origin: "http://localhost:3000",
    methods: ["GET", "POST"]
  }
});

上述代码指定允许的跨域地址为 http://localhost:3000，允许的 HTTP 方法为 GET 和 POST。这样就能够允许来自此地址的请求。如果有多个允许的地址，可以使用数组：

const io = require("socket.io")(server, {
  cors: {
    origin: ["http://localhost:3000", "http://example.com"],
    methods: ["GET", "POST"]
  }
});

方法二：使用代理

另一种方法是使用代理，在客户端代码中加入以下代码：

-- -------------------- ---- -------
----- ------ - --------------------------- -
  ----- -------------
  ----------- --------------
  ------------- -
    ------------------- ----------
  -
---

----------------------- - ------------
------------------- - -----

上述代码将客户端的请求转发到本地 http://localhost:3000 地址。在服务端代码中，只需要监听默认的地址即可。

const io = require("socket.io")(server);

注意事项

无论是哪种解决方案，在设置跨域选项时，应该仅允许必要的来源，并限制允许的 HTTP 方法。这样可以减少跨站脚本攻击（XSS）和恶意请求的风险。

示例代码

完整的客户端及服务端示例代码如下：

-- -------------------- ---- -------
-- -----
----- ------ - --------------------------- -
  ----- -------------
  ----------- --------------
  ------------- -
    ------------------- ----------
  -
---

----------------------- - ------------
------------------- - -----

-------------------- -- -- -
  -------------------------
---

-------------------- ------ -- -
  --------------------- ---------- ------
---

---------------------- ------- ---------

-- -----
----- ---- - ----------------
----- ------ - --------------------

--------------------

----- -- - -----------------------------

------------------- -------- -- -
  -------------- ------ ------------

  -------------------- ------ -- -
    --------------------- ---------- ------
    ---------------------- ---- ----------
  ---

  ----------------------- -- -- -
    -------------- ------ ---------------
  ---
---

总结

跨域问题是使用 socket.io 进行实时通信时常见的问题，但是通过设置跨域选项或使用代理可以很容易地解决。在设置跨域选项时，应该仅允许必要的来源，并限制允许的 HTTP 方法以降低风险。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/652923807d4982a6ebbb00a0