如果您是一个前端工程师或者正在学习前端开发，那么您一定知道 Socket.io 是一种非常流行的 JavaScript 库，它为创建实时应用程序提供了一种简单易用的方式。然而，当您尝试在不同域之间使用 Socket.io 时，您可能会遇到跨域问题。本文将为您介绍解决 Socket.io 跨域问题的正确姿势，让您摆脱这一难题。
什么是跨域？
在前端开发中，跨域是一个非常常见的问题。简单来说，跨域是指您的 JavaScript 代码试图从另一个域获取数据或资源。在同一个域内，JavaScript 代码可以自由交互，而在不同的域之间，浏览器会出于安全考虑禁止这种交互。如果您的代码需要跨域访问资源，那么您需要采取一些措施来解决这个问题。
Socket.io 跨域问题的表现
Socket.io 是一个用于创建实时应用程序的 JavaScript 库，它使用 WebSockets 协议进行双向通信。在同一个域内，Socket.io 的使用非常简单，您只需要引入库并创建一个 Socket.io 实例即可：
const socket = io();
然而，在跨域情况下，Socket.io 可能无法正常工作。如果您的 Socket.io 服务器和客户端代码处于不同的域中，那么您可能会看到如下的报错信息：
Access to XMLHttpRequest at 'http://example.com/socket.io/?EIO=3&transport=polling&t=NjG6Ukp' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
这个错误意味着浏览器无法从远程服务器获取数据，因为资源的响应头中没有包含允许跨域访问的信息。
要解决 Socket.io 跨域问题，您需要采取以下步骤：
1. 在服务器端设置允许跨域访问的响应头
为了允许跨域访问，Socket.io 服务器需要添加一个允许跨域访问的响应头。在 Node.js 中，您可以使用以下代码实现：
const io = require('socket.io')(server, {
cors: {
origin: '*',
methods: ['GET', 'POST']
}
});这里的 origin: '*' 表示允许来自任何域的请求。您还可以将其设置为特定的域名。methods: ['GET', 'POST'] 表示允许 GET 和 POST 请求。
2. 在客户端请求时添加跨域相关参数
一旦服务器设置了允许跨域访问的响应头，客户端代码也需要进行一些更改。您需要在创建 Socket.io 实例时添加一个向服务器发送跨域请求的参数，例如：
const socket = io('http://example.com', {
withCredentials: true,
extraHeaders: {
'Access-Control-Allow-Origin': '*'
}
});这里的 withCredentials: true 表示在跨域请求中包括凭据，例如 cookie。extraHeaders 则是传递其他请求头的选项，例如 Access-Control-Allow-Origin。这样，当客户端与服务器通信时，就可以发送带有跨域标志的请求了。
3. 在服务器端设置跨域访问的 Socket.io endpoint
为了防止遇到与实时应用相关的资源的 CORS 问题，Socket.io 在每个连接上使用了一个 endpoint。默认情况下，这个 endpoint 在客户端调用 WebSocket 或 Long Polling 时自动添加到连接 URL 中。如果您的 Socket.io 服务器可以接受跨域请求，那么您需要在服务器端设置跨域访问的 endpoint。
-- -------------------- ---- -------
----- -- - ---------------------------- -
----- -
------- ----
-------- ------- --------
--------------- ---------------------
------------ ----
-
---
-----------------
------------------- -------- -- -
-------------- ---- ------------
---这里的 io.origins('*:*') 表示允许任何来源（任何域，任何端口）的连接。
完整示例代码
-- -------------------- ---- -------
-- ---------
----- ------ - -------------------------------
----- -- - ---------------------------- -
----- -
------- ----
-------- ------- --------
--------------- ---------------------
------------ ----
-
---
-----------------
------------------- -------- -- -
-------------- ---- ------------
---
------------------- -- -- -
---------------------- -- ---------
---
-- ---------
----- ------ - ------------------------ -
---------------- -----
------------- -
------------------------------ ---
-
---结论
解决 Socket.io 跨域问题并不是一件非常困难的事情，但是需要您在客户端和服务器端都进行相应的设置。这篇文章提供了一些简单明了的步骤和示例代码，希望能够对您有所帮助。如果您在实际应用中遇到了其他问题或者有其他优秀的解决方案，请在评论区分享您的经验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fa615544713626014be32a