前言
在 Web 应用程序中，服务器推送消息是很常见的需求。而 Server-Sent Events（SSE）是一种 Web 技术，可以通过简单的 HTTP 连接从服务器推送消息到客户端。
然而，当我们使用 SSE 实现服务器消息推送时，可能会遇到跨域问题。本文将重点介绍 SSE 实现服务器消息推送时的跨域问题解决方案和实现。
SSE 简介
SSE 是通过 HTTP 连接向浏览器推送事件流的一种技术。其中，事件可以是任意格式的数据，比如 JSON、XML、HTML 等。SSE 协议定义了一种约定格式，如下所示：
event: myevent
data: {"data": "hello"}
event: myevent
id: 123
data: <p>World</p>其中，event 用于指定事件名称，可以省略；data 用于发送数据；id 用于指定事件 ID，可以省略。这种格式可以支持比较复杂的数据结构，并且是纯文本格式，相比 WebSocket 更加轻量。
实现 SSE 服务器
在实现 SSE 服务器时，我们需要使用 Node.js 的 http 模块创建一个 HTTP 服务器，并使用 response.writeHead 和 response.write 方法将数据写入响应。
下面是一个简单的 SSE 服务器实现例子：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
-- ---------- ---
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-- - - -----------
----- ----- - -------------- -- -
----------------- ---------
---------------- ------------------ ----- --- --------------------------- ----------
-- ------
-- ---------------
--------------- -- -- -
---------------------
---
---
------------------- -- -- -
---------------- ------ --------- -- ---- -------
---在这个例子中，我们使用 HTTP 服务器每秒向客户端发送一个名为 tick 的事件，包含当前时间的 JSON 数据。同时，在客户端关闭连接时，停止发送事件。
跨域问题
当我们使用上面的 SSE 服务器和简单的 HTML 页面来连接时，我们可能会遇到跨域问题。因为 SSE 使用了 HTTP 协议连接服务器，而 HTTP 是基于域名和端口的，如果 SSE 服务器的域名和端口和页面服务器不一致，就会遇到跨域问题。
这时，我们需要解决跨域问题，使 SSE 服务器可以和任意域名和端口的页面服务器建立连接。接下来，我们将介绍两种常见的解决方法。
解决方法一：使用 CORS
CORS（Cross-Origin Resource Sharing）是一种 Web 技术，可以解决跨域问题。我们可以在 SSE 服务器的响应头中添加 CORS 相关的信息，使得浏览器可以跨域请求 SSE 服务器。下面是一个例子：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
-- ---------- ---
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
------------------------------ ---- -- -----------
------------------------------- ---------------
---
-- - - -----------
----- ----- - -------------- -- -
----------------- ---------
---------------- ------------------ ----- --- --------------------------- ----------
-- ------
-- ---------------
--------------- -- -- -
---------------------
---
---
------------------- -- -- -
---------------- ------ --------- -- ---- -------
---在这个例子中，我们在响应头中添加了一个 Access-Control-Allow-Origin 字段，其中的 * 表示允许任意域名和端口访问。由于 SSE 使用的是纯文本格式，所以不需要添加其他的 CORS 相关信息。当浏览器连接 SSE 服务器时，就可以跨域请求 SSE 服务器了。
解决方法二：使用代理服务器
另一种解决跨域问题的方法是使用代理服务器。我们可以在页面服务器中创建一个代理服务器，将 SSE 请求转发到 SSE 服务器中。这种方法可以良好地控制和管理跨域请求，但是需要占用额外的资源和端口，增加了服务器的负担。
下面是一个简单的使用 Express 实现代理服务器的例子：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- --- - ----------
-- - ---- --- --- ----
--------------- ----- ---- -- -
----- ------- - -
--------- ------------
----- -----
----- ----
------- ------
-------- -
---------------- -----------
------------- -------------
--------- --------------------
--
--
-- ------
----- -------- - --------------------- ---------- -- -
---------------------------------- ------------------
--------------- -- -- -
-------------------
---
-- - --- --------------
-------------------
---
-- ------
---------------
---
---------------- -- -- -
------------------ ------ --------- -- ---- -------
---在这个例子中，我们使用 Express 创建了一个代理服务器，将 /sse 路径请求转发到 SSE 服务器上，并在响应中传递 SSE 服务器的数据。客户端只需要连接代理服务器，并从代理服务器上获取 SSE 数据即可。
总结
本文介绍了使用 SSE 实现服务器消息推送时的跨域问题解决方案和实现。我们通过学习 SSE 的使用和实现，以及 CORS 和代理服务器的应用，为大家提供了跨域解决方案的参考。希望本文能够对大家有所帮助，同时也希望大家在项目中使用 SSE 时，能够谨慎处理跨域问题，保证 Web 应用程序的安全性和稳定性。
示例代码
完整示例代码可以在以下代码仓库中获取：
https://github.com/auzzie-codes/sse-demo
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646e7ea0968c7c53b0cea478