Server-Sent Events 是一项 HTML5 技术，用于在 Web 浏览器和服务器之间实现单向的、持久化的、基于文本的数据推送。使用 SSE 技术，服务器可以定期向客户端发送数据，而不需要客户端定时向服务器发起请求。这种技术可以提高 Web 应用的实时性和性能。
然而，在实践中，很多开发者在使用 SSE 技术时遇到了跨域问题。本文主要介绍 SSE 技术的跨域限制和解决方法。
SSE 跨域限制
SSE 技术与 Ajax 技术类似，也需要遵守同源策略。也就是说，只有当客户端的页面和 SSE 服务器的 URL 协议、主机名和端口号都相同时，才允许建立 SSE 连接。如果 SSE 服务器的 URL 与客户端的页面不同源，那么 SSE 连接就无法建立。这是一种基本的安全限制，用于防止跨站脚本攻击。
解决方法
针对 SSE 跨域限制，我们可以采用以下两种方法来解决：
1. 使用代理服务器
使用代理服务器是一种最常见的解决 SSE 跨域问题的方法。该方法的基本思路是：客户端将 SSE 请求发送给代理服务器，代理服务器再将请求转发给 SSE 服务器，从而绕过了同源策略的限制。客户端（浏览器）与代理服务器之间是同源的，因此不受跨域限制。
下面是一个示例代码，展示如何使用代理服务器解决 SSE 跨域问题。我们假设 SSE 服务器的 URL 是 https://sse.example.com/events，代理服务器的 URL 是 https://proxy.example.com/events。客户端通过 AJAX 技术向代理服务器发送 SSE 请求：
-- -------------------- ---- -------
--- ------ - --- -----------------------
---------------- - --------------- -
------------------------
--
-------------- - --------------- -
-------------------- -------
--在代理服务器端，我们需要收到 SSE 请求，并将其转发到 SSE 服务器端。下面是一个 Node.js 的示例代码：
-- -------------------- ---- -------
--- ------- - -------------------
--- ---- - ----------------
--- ----- - -----------------
--- --- - ----------
-- - --- ----- --- ---
------------------ ------------- ---- -
--- ------- - -
--------- ------------------
----- ----
----- ----------
------- ------
-------- -
--------------- --------------------
---------------- -----------
------------- ------------
-
--
--- ------- - ---------------------- ------------------ -
-----------------------------
------------------- --------------- -
---------------- - - ----- - --------
---
------------------ ---------- -
----------
---
---
------------------- ----------- -
-------------------- ---
---
--------------
---
-- -------
----------------------------------在上面的代码中，我们使用了 Express 框架创建了一个 HTTP 服务器，并在其中定义了一个路由 /events，将 SSE 请求转发到 SSE 服务器。我们使用 Node.js 自带的 https 模块向 SSE 服务器端发起 HTTPS 请求，并将 SSE 数据转发给客户端。
2. 配置 SSE 服务器的 CORS
除了使用代理服务器之外，我们还可以通过配置 SSE 服务器的 CORS 来解决 SSE 跨域问题。CORS 是一项标准化的 Web 技术，用于解决跨域资源共享问题。
要启用 SSE 服务器的 CORS，我们需要在服务器端添加以下 HTTP 响应头：
Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET Access-Control-Allow-Headers: Content-Type
其中，Access-Control-Allow-Origin 表示 SSE 服务器允许的客户端来源，这里我们设置为 *，表示允许任何来源。Access-Control-Allow-Methods 则表示 SSE 服务器允许的 HTTP 请求方法，这里我们只使用了 GET 方法。Access-Control-Allow-Headers 表示 SSE 服务器允许的 HTTP 请求头，这里我们只允许 Content-Type 头。
下面是一个 Node.js 的 SSE 服务器的示例代码，展示如何在服务器端添加 CORS 响应头：
-- -------------------- ---- -------
--- ---- - ----------------
-- --- --
--- ---- - -
------ -----------
------ ----------
--
-- -- --- ---
------------------------------- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
------------------------------ ----
------------------------------- ------
------------------------------- --------------
---
-- ---- --- --
--- ----- - ---------------------- -
-------------------------- -
---------------
---
-- ------
-- --------------
--------------- ---------- -
---------------------
---
----------------在上面的代码中，我们使用 Node.js 创建了一个 SSE 服务器，并在其中使用了 res.writeHead() 方法添加了 CORS 响应头。服务器会定时向客户端发送上面定义的 SSE 数据。如果客户端断开连接，服务器就会停止向客户端发送数据。
总结
本文介绍了在使用 SSE 技术时遇到的跨域问题以及解决方法。跨域限制是一种基本的安全限制，它可以防止跨站脚本攻击，但同时也限制了 Web 应用程序的发展。我们可以使用代理服务器和 CORS 技术来解决 SSE 跨域问题，从而提高 Web 应用的实时性和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648a0aea48841e989483cdd1