前言
前端开发中，经常会涉及到同源策略限制的问题，比如无法跨域请求数据。而 SSE（Server-Sent Events）和 CORS（Cross-Origin Resource Sharing）可以解决这个问题，提高前端开发的效率，也方便了服务端的开发。
SSE
SSE 是一种服务器向客户端推送事件的方式，是基于 HTTP 的长连接技术。它的用途非常广泛，比如实时通知、在线聊天、股票行情、实时比分等。
SSE 的优点在于它是一种轻量级的实现方式，不需要建立复杂的 Realtime Web 基础设施。在浏览器支持 SSE 的情况下，只需要简单的 JavaScript 代码即可实现实时更新数据，而不需要通过定时轮询服务器的方式。
SSE 实现
在服务端，使用 SSE 需要设置特定的响应头，比如 Content-Type、Cache-Control、Connection、Access-Control-Allow-Origin 等。
示例代码：
-- -------------------- ---- -------
----- ------- - ------------------
----- --- - ---------
-- --- ----
--------------- ----- ---- -- -
-- --------- ---
-- ------------------- -- ----------------------------------------------- --- --- -
----------------------------- ----------------------------------
------------------------------ -----------
--------------------------- -------------
-------------------------------------------- ------------------------ -- ------
------------------
-- --------
-------------- -- -
----- ---- - ------ ------------------ -------- ------ ----- --------
---------------
-- -----
- ---- -
------------------------- --- -----------
-
--
---------------- -- -- -
------------------- ------- -- -----------------------
--在客户端，使用 SSE 也非常简单，只需要新建一个 EventSource 对象即可。在接收到服务端发送的事件数据后，可以在 message 回调函数中处理数据，实现实时更新。
示例代码：
// SSE 示例
const source = new EventSource('http://localhost:3000/sse')
source.onopen = () => console.log('SSE connection has been established.')
source.onerror = () => console.log('SSE connection error occurred.')
source.onmessage = event => {
const data = JSON.parse(event.data)
console.log(`Received data from server: ${data.message}`)
}CORS
CORS 是一种跨域资源共享机制，可以让浏览器安全地访问其他域名下的资源。它的原理是在服务端设置特定的响应头，告诉浏览器哪些域名可以跨域访问该资源。
CORS 实现
在服务端，使用 CORS 需要设置特定的响应头，比如 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 等。
示例代码：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- --- - --------- -- ---- ---- ---------------- ----- ---- -- - -------------------------------------------- ------------------------ -- ------ --------------------------------------------- ----- ----- --------- -- ------- --------------------------------------------- --------------- -- ------ --------------- ------- -- ---------------- -- -- - ------------------- ------- -- ----------------------- --
在客户端，使用 CORS 比较简单，只需要正常发起请求即可。浏览器会自动进行 CORS 前置请求（OPTIONS），根据服务端返回的响应头信息进行跨域请求。
示例代码：
// CORS 示例
fetch('http://localhost:3000/cors')
.then(response => response.text())
.then(data => console.log(`Received data from server: ${data}`))总结
SSE 和 CORS 都是用于解决跨域访问的问题，它们各自的应用场景也不尽相同。在实际开发中，我们可以根据具体需求选择合适的技术方案。
SSE 适用于实时通知、在线聊天、股票行情、实时比分等场景，需要服务端主动推送数据给客户端。CORS 适用于客户端需要访问其他域名下的资源的场景，比如 AJAX 请求、图片加载、Web 字体等。
开发过程中，需要注意设置好相应的响应头，以及在客户端处理好 CORS 前置请求。这样才能顺利解决跨域访问问题，提高开发效率，提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b35d7148841e9894fa20a7