服务器发送事件（Server-Sent Events，简称 SSE）是一种通信协议，用于在 Web 浏览器和服务器之间进行单向实时通信。SSE 提供了一种简单的方式，使服务器能够将更新推送到客户端浏览器，而无需客户端浏览器发起请求。
然而，在实际使用 SSE 进行通信时，我们可能会遇到跨域问题。本文将介绍如何使用 SSE 通信避免跨域问题，并提供示例代码。
什么是跨域问题？
在 web 应用程序的运行过程中，客户端与服务器端之间的通信存在跨域问题。简单地说，就是在浏览器的同源策略（Same-Origin Policy）约束下，一种网页的脚本无法访问另一种网页的 DOM 对象，也无法向另一种网站发送 AJAX 请求。
SSE 如何避免跨域问题？
使用 SSE 进行通信时，需要在服务端正确地返回指定的响应头，以避免浏览器针对跨域请求的拦截。
在服务端发送 SSE 事件数据时，需要设置响应头的 Content-Type 标题为 "text/event-stream" ，并设置 "Access-Control-Allow-Origin" 标题为 "*" ，以允许来自任何域名的请求访问。
以下为 Node.js 示例代码：
-- -------------------- ---- -------
----- ---- - ---------------
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------------------------ ---
--
-------------- -- -
----- ---- - --- ---------------------------
----- ------- - ------ ------------
------------------
-- -----
--
------------------- -- -- -
---------------- ------ -- ------- -- ---- ------
--在客户端接收 SSE 事件流时，可以使用 EventSource 接口，并通过指定服务端返回的 URL 建立连接。当建立连接后，通过监听 message 事件来监听服务端的响应数据。
以下为客户端示例代码：
const eventSource = new EventSource('http://localhost:3000')
eventSource.addEventListener('message', event => {
console.log(event.data) // 打印服务端推送的数据
})总结
通过正确地设置 SSE 响应头，我们可以有效地避免 SSE 通信时的跨域问题。SSE 提供了一种简单的、实时的、可靠的单向通信方式，可以用于构建实时聊天、实时数据展示等实时应用场景。
在实际应用中，我们还需要考虑 SSE 通信的安全性、稳定性等问题，加以实践和完善，以提升应用的可靠性与用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f06f69f6b2d6eab3a78ab7