问题描述
在前端开发过程中，我们可能会碰到 Socket.io 连接被拒绝的问题，具体表现为浏览器端无法与服务器建立 WebSocket 连接，导致实时通信功能受阻。这个问题通常会发生在以下情况：
- 服务器端未正确配置 Socket.io 的跨域访问设置。
- 浏览器端对 Socket.io 进行跨域访问时，被服务器端的安全策略（如 CSP）拦截。
本文将针对以上两个问题，详细讲解 Socket.io 连接被拒绝的原因及解决方法。
问题原因
问题 1：服务器端未正确配置 Socket.io 的跨域访问设置。
当浏览器端使用 Socket.io 进行跨域访问时，浏览器会向服务器发送一个 CORS 跨域请求，以判断服务器端是否允许来自该域名的跨域请求。如果服务器端没有正确配置 Socket.io 的跨域访问设置，浏览器就无法与服务器端建立 WebSocket 连接，从而出现连接被拒绝的错误。
问题 2：浏览器端对 Socket.io 进行跨域访问时，被服务器端的安全策略（如 CSP）拦截。
在一些场景下，服务器端可能会配置安全策略来限制来自浏览器的脚本嵌入行为。这些安全策略可能包括 Content Security Policy（CSP）等。当浏览器端进行 Socket.io 的跨域访问时，如果该访问被安全策略拦截，就会导致 Socket.io 的连接被拒绝。
解决方法
解决方法 1：正确配置服务器端的跨域访问设置
正确配置服务器端的跨域访问设置是解决 Socket.io 连接被拒绝问题的方法之一。在 Node.js 中，我们可以通过以下方式进行跨域访问的配置：
const io = require('socket.io')(server, {
cors: {
origin: '*',
methods: ['GET', 'POST'],
},
});上面代码中，我们在创建 Socket.io 实例时，传递了一个 cors 对象作为第二个参数。该对象包含两个属性：
origin：指定允许的跨域来源。若设为*，则表示允许来自所有域名的访问。methods：指定允许的 HTTP 方法。若设为[ 'GET', 'POST' ]，则表示仅允许 GET 和 POST 请求。
我们需要根据实际需求，配置相应的 cors 对象，以确保浏览器端能够正确访问 Socket.io。
解决方法 2：遵循服务器端的安全策略
如果服务器端有安全策略限制，我们需要遵循这些限制。例如，如果服务器端配置了 CSP，我们应当在浏览器端的 head 标签内，添加如下的 CSP 配置项：
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline' cdn.example.com;" />
上述代码中，我们在 meta 标签中添加了一个名为 Content-Security-Policy 的 HTTP 头。该头包含一个 content 属性，其中指定了 CSP 的设置。其中：
default-src 'self'：规定了所有资源的默认来源，表示所有资源均来自当前域名。style-src 'self' 'unsafe-inline' cdn.example.com;：规定了 CSS 的来源，包括了当前域名、不安全的 inline 样式、以及 cdn.example.com 域名。注意，当要使用不安全的 inline 样式时，必须手动添加'unsafe-inline'字符串。
如果我们正确遵循了服务器端的安全策略，就可以避免被策略限制导致的 Socket.io 连接被拒绝。
示例代码
下面的示例代码演示了如何在服务器端正确配置 Socket.io 的跨域访问设置，以及如何在浏览器端遵循服务器端的安全策略：
服务器端
-- -------------------- ---- -------
----- --- - ---------------------
----- ------ - ----------------------------------
----- ---- - ----------------
-- ------
----------------
-- -- --------- --
----- -- - ---------------------------- -
----- -
------- ----
-------- ------- --------
--
---
-- ------
------------------- -------- -- -
------------------- ------------
---
-- -----
------------------- -- -- -
---------------------- -- ---------
---客户端
-- -------------------- ---- -------
--------- -----
----- ----------
------
-----
------------------------------------
-------------------- ------- ---------- ------- --------- ------ --------------- -----------------
--
----- --------------- --
---------------- ------------
-------
------
------- -----------------------------------------------------------------------------------
--------
----- ------ - ----------------------------
-------------------- -- -- -
---------------------- -- ---------
---
---------
-------
-------总结
本文讲解了 Socket.io 连接被拒绝的原因及解决方法，包括正确配置服务器端的跨域访问设置和遵循服务器端的安全策略等。希望本文能够帮助读者顺利解决 Socket.io 连接被拒绝问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d975848841e9894bede88