什么是 CORS？
CORS（Cross-Origin Resource Sharing），即跨域资源共享，是一种在浏览器和服务器之间进行跨域通信的机制。跨域是指当前资源请求和响应的文档所处的域名、协议、端口号与发出请求的文档不一致。
在前端开发中，我们经常遇到需要访问其他域名的资源的情况，例如通过 Ajax 请求接口、将静态资源放在 CDN 上等。此时，如果不开启 CORS，浏览器会拦截这些请求，并给出相应的错误消息，导致请求无法成功执行。
什么是 Socket.io？
Socket.io 是一个基于 Node.js 的实时应用程序框架，它能够在浏览器与服务器之间实现双向实时通信。通过它，我们可以轻松地构建实时应用程序，例如聊天应用、实时游戏等。
Socket.io 的实现是基于 WebSocket 协议的，但它同时也支持其他传输协议，例如轮询和长轮询等，以保证在不支持 WebSocket 的环境下也能够顺利地运行。
Socket.io 遇到的 CORS 跨域问题
对于 Socket.io，由于其基于 WebSocket 协议，所以必须开启 CORS，否则相关请求将无法执行。但是，在实际开发中，我们发现开启 CORS 之后仍然会遇到跨域问题，例如：
Failed to connect to http://localhost:3000/socket.io/?EIO=4&transport=polling&t=Nh4rxGX: Access to XMLHttpRequest at 'http://localhost:3000/socket.io/?EIO=4&transport=polling&t=Nh4rxGX' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
这是由于服务端没有正确支持 CORS 所造成的。常见的解决方案包括：
- 设置允许跨域访问的域名白名单：
const io = require('socket.io')({
cors: {
origin: 'http://localhost:8080',
methods: ['GET', 'POST']
}
});这里指定了只允许来自 http://localhost:8080 域名的请求，同时指定了支持的 HTTP 请求方法。
- 在服务器端添加 CORS 中间件：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ------ - ----------------------------------
----- -- - ---------------------------- -
----- -
------- ----
-------- ------- -------
-
---
------------- ---- ----- -- -
-------------------------------------------- -----
--------------------------------------------- ----- -------
-------
---这里先添加了一个 Express 中间件，为接口添加了 CORS 的响应头，然后在 Socket.io 配置中开启了 CORS。
总结
CORS 是现代 Web 应用程序开发中的一个重要话题。在使用 Socket.io 进行实时应用开发时，如果遇到了跨域问题，可以通过设置 CORS 白名单或者在服务端添加 CORS 中间件等方式来解决。对于前端开发者来说，了解 CORS 的概念和解决方案是必不可少的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64769f2d968c7c53b0348b59