在前端开发中，经常会用到 Socket.io 进行实时通信，但是在使用过程中可能会遇到 “Access-Control-Allow-Origin” 报错，这是因为浏览器的同源策略限制了跨域访问。
本文将介绍 Socket.io 中出现 “Access-Control-Allow-Origin” 报错的解决方法，希望能够帮助读者更好地理解前端开发中的跨域问题。
什么是跨域？
跨域是指在浏览器中，当一个页面的脚本试图访问另一个页面的脚本时，由于安全策略的限制，会出现跨域问题。同源策略是浏览器的一种安全策略，它限制了一个源（协议 + 域名 + 端口号）的文档或脚本如何能够与另一个源的资源进行交互。
Socket.io 中的跨域问题
Socket.io 是一个实现了实时、双向通信的 JavaScript 库，它在前后端之间建立了一条长连接，实现了实时通信。然而，在使用 Socket.io 进行跨域通信时，会出现 “Access-Control-Allow-Origin” 报错。
这是因为当前端页面与后端建立 Socket 连接时，浏览器会发送一个跨域请求，如果后端没有设置跨域头，浏览器就会拒绝这个请求，从而导致报错。
解决方法
解决 Socket.io 中的跨域问题，需要在后端设置跨域头。具体而言，可以在后端代码中添加以下代码：
const io = require('socket.io')(server, {
cors: {
origin: '*',
methods: ['GET', 'POST'],
},
});其中，cors 表示跨域配置，origin 表示允许跨域的域名，* 表示允许任意域名，methods 表示允许的请求方法。
除此之外，也可以使用 cors 中间件来解决跨域问题。具体而言，可以在后端代码中添加以下代码：
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());这样就可以使用 cors 中间件来解决跨域问题了。
示例代码
以下是一个简单的 Socket.io 示例代码，演示了如何解决跨域问题：
-- -------------------- ---- -------
-- ----
----- -- - ---------------------------- -
----- -
------- ----
-------- ------- --------
--
---
------------------- -------- -- -
-------------- ---- ------------
----------------------- -- -- -
----------------- ---------------
---
--------------- --------- ----- -- -
--------------------- - - -----
------------- --------- -----
---
---
-- ----
----- ------ - ----------------------------
------------------------- --- -
------------------- -- -------- ---- ---------
----------------- --------- ---------------
----------------
------ ------
---
--------------- --------- -------- ----- -
-------------------------------------------
---总结
本文介绍了 Socket.io 中出现 “Access-Control-Allow-Origin” 报错的解决方法，主要是通过在后端设置跨域头或使用 cors 中间件来解决跨域问题。希望读者能够掌握跨域问题的解决方法，更好地进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f524252b3ccec22fd47979