什么是 SSE
SSE（Server-Sent Events）是一种与客户端进行持久化连接的技术，通过浏览器向服务器发送一个 HTTP 请求，然后服务器返回一个永久开放的连接，然后就可以不断发送消息到客户端，而无需关掉连接重新请求。SSE 具有实时性、简单易用、无需特殊依赖和支持的优势，被广泛应用于 Web 实时性推送的场景。
问题的出现
但是，我们在使用 SSE 的过程中，可能会遇到一些问题，其中之一就是 SSE 在 Firefox 浏览器下出现了跨域问题。因为 Firefox 浏览器默认不允许跨域请求，而且 SSE 请求一般使用的是 GET 请求，所以无法像 Ajax 一样添加 CORS 头信息 or 进行 JSONP 回调处理，这使得跨域请求变得困难。
问题的解决
不过，我们仍旧可以通过一些特殊的方式来解决这个问题，并实现 SSE 在 Firefox 浏览器下的跨域请求。
JSONP 利用
首先，我们可以通过 JSONP 的方式在 Firefox 下实现 SSE 的跨域请求。JSONP 实质上还是在发送 GET 请求，只不过约定后端返回一段固定格式（callback+数据），前端再利用 callback 回调函数来获取数据。下面，我们可以通过一个例子来演示如何利用 JSONP 来实现 SSE 在 Firefox 下的跨域请求。
后端代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
------------------ ----- ---- -- -
----- -------- - -------------------
---------
--------------- --------------------
---------------- -----------
------------- -------------
---
-------------- -- -
----- --------- - -----------
----- ---- - ------ ------------------
----- ------ - ---------------------------
------------------
-- ------
---
---------------- -- -- -
------------------- -- --------- -- ------------------------
---这是一个基于 Express 框架的后端 SSE 示例代码，其中 app.get('/events', ...) 表示创建 SSE 的路由，callback = req.query.callback 表示从 URL 中获取回调函数名称，内容为 eventData，利用回调函数和输出格式 res.write(output) 就可以实现 JSONP 的跨域请求。
前端代码：
const source = new EventSource('http://localhost:8080/events?callback=myCallback');
source.onmessage = function(event) {
console.log(event.data);
}
function myCallback(data) {
console.log(data);
}前端代码中，通过 new EventSource('http://localhost:8080/events?callback=myCallback') 创建一个 SSE 连接，callback=myCallback 表示要使用的回调函数名称。因为 JSONP 是 GET 请求，所以请求时会将这个 callback 函数名称加到 URL 后面，然后在返回数据（eventData）时会把这个 callback 作为函数名拼接到数据前面。
长轮询访问
除了 JSONP，我们还可以利用长轮询（Long Polling）的方式来实现 SSE 在 Firefox 下的跨域请求。所谓长轮询，就是客户端向服务端发送一个请求，等待服务端返回。当服务端有消息时，会直接返回给客户端，然后客户端再次向服务端发送请求，为了保持连接不断开，一般都是利用 SetTimeout 不断进行轮询。
后端代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
--- ------- - ---
------------------ ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- -------------
---
------------------
---
----------------- ----- ---- -- -
----- --------- - --------------
------------------------ -- -
------------------- -------------------
---
------- - ---
---后端代码中，我们利用 Express 框架创建了两个路由，一个是 SSE 的路由 /events，另一个是 POST 请求的路由 /send。在 /events 中，当客户端连接上来时，我们将连接对象挂在 clients 数组中，然后等待下一步操作。在 /send 中，当有消息（eventData）需要推送时，就直接将消息写给 clients 数组中的所有连接对象。
前端代码：
-- -------------------- ---- -------
----- -------- ----------- -
----- ------ - --- --------------------------------------------
---------------- - --------------- -
------------------------
-- -------
-
-
----- -------- ---------- -
----- ----------------------------------- -
------- -------
-------- -
--------------- -------------------
--
----- -----------------------
---
-
----- -------- ------ -
----- ------------
----- ----------- --------
-在前端代码中，利用 new EventSource('http://localhost:8080/events') 创建了一个 SSE 连接，当服务端有事件推送时，会在 source.onmessage 回调中接收到数据。在 send 函数中，利用 fetch 发送 POST 请求，将推送的数据作为一个 JSON 对象写到请求体中。
总结
SSE 技术在实现实时性推送方面具有很大的优势，但是在 Firefox 浏览器下可能会出现跨域问题，本篇文章主要针对该问题进行了探讨，并给出了两种解决方案，一是利用 JSONP，二是利用长轮询。实际使用时，开发人员可以根据具体情况选择合适的方式，提高 SSE 的兼容性和可用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64faf2fef6b2d6eab31b79c2