在前端开发中，Server-sent Events（简称 SSE）可以用于实现服务器推送数据，实时更新页面内容。它与 WebSocket 相比更轻量级且易于使用，不需要建立全双工连接，可以实现单向通信。
然而，在使用 SSE 进行跨域请求时，可能会遇到一些问题，如本文将要讨论的 CORS（跨域资源共享）问题。下面将介绍 SSE 概念、CORS 问题及其解决方法。
SSE 概念
SSE 是一种基于 HTTP 协议的服务器推送技术，它通过 HTTP 连接向客户端提供一系列实时事件的流。SSE 采用长轮询的机制，服务器端响应请求后不立即关闭连接，而是保持连接打开状态，并发送一个标准的 HTTP 响应，该响应包含一个特殊的 Content-Type 值 text/event-stream，表示这是一个 SSE 连接。客户端实时监测这个连接，当服务器有新事件数据时，会发送一个带有自定义事件名称和数据的文本域，客户端会通过 JavaScript 获取到这些数据。
CORS 问题
CORS 是浏览器为了保证用户安全而采取的一种机制，它通过在 HTTP 头中设置多种属性来限制跨域请求，主要防止跨站点伪造请求。如果使用 SSE 进行跨域请求且服务器返回的响应头没有添加 CORS 相关属性，浏览器将会禁止客户端接收事件流数据，导致 SSE 功能无法正常运行。
解决方法
解决 SSE 跨域请求问题的方法非常简单，只需要在服务器端添加相应的 CORS 响应头属性即可。下面是常见的 CORS 响应头属性：
Access-Control-Allow-Origin：允许的访问源，可以是*，表示允许所有源都可以访问该资源。Access-Control-Allow-Methods：允许的 HTTP 方法。Access-Control-Allow-Headers：允许的请求头信息。Access-Control-Expose-Headers：允许客户端访问的响应头信息。
在 Node.js 的 Express 框架中，可以通过以下代码实现 SSE 跨域访问：
-- -------------------- ---- -------
----- ------- - ------------------
----- --- - ---------
-- -- --- --
--------------- ----- ---- -- -
-- -----
------------------ -
--------------- --------------------
---------------- -----------
------------------------------ ---
--
-- ----------
---------------- -----------
-- ---------
-------------- -- -
---------------- - - --- --------------------------- - -------
-- -----
--
-- -----
---------------- -- -- -
------------------- ------- -- ---- ------
--在客户端使用 SSE 时，需要设置 withCredentials 属性为 true，以启用包括凭据在内的跨站点访问控制请求。以下是一个简单的使用 SSE 的示例：
const evtSource = new EventSource('http://localhost:3000/sse')
evtSource.onopen = (event) => console.log('SSE connection opened')
evtSource.onmessage = (event) => console.log(event.data)
evtSource.onerror = (event) => console.error('SSE error:', event)总结
本文介绍了 SSE 的概念、CORS 问题及其解决方法，通过示例代码演示了在 Node.js 中使用 SSE 进行跨域请求的方法。在实际项目中，需要根据实际情况设置相应的 CORS 响应头属性，并且需要特别注意浏览器对跨域请求的限制，避免出现安全问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b4e5b968c7c53b0da788a