在 Web 开发中，服务器与客户端之间的交互变得越来越重要。服务端推送技术和跨域资源共享（CORS）是一些传输数据的方式，向开发人员提供了更多的选择来实现这种交互。
本文将介绍服务器端与前端之间的两种重要的交互方式：SSE 和 CORS，同时给出代码示例，以便读者更好地理解和实践这些交互方式。
SSE
SSE（Server-Sent Events）是指从服务器推送数据到客户端的一种方式。与传统的 HTTP 请求不同，SSE 允许服务器持续地向客户端发送数据，而不是等待客户端请求获取数据。
实现 SSE 的步骤
- 在服务器端设置发送事件的流和响应头部。
- 在客户端使用 EventSource 对象监听服务器端的事件。
- 在服务器端将要发送的数据发送到客户端。
代码示例
下面是一个基本示例。它使用 Node.js 作为服务器端，并使用了 EventSource 对象来监听事件。
Node.js 服务器端代码：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- -------------------- -- ----- ---
---------------- ----------- -- -------
------------- ------------- -- ----
---
-------------- -- -
----- ---- - --- -------
----------------- ---------
---------------- -------------- -- ----
-- ------ -- --------
----------------客户端代码：
const source = new EventSource('http://localhost:8888');
source.addEventListener('ping', (event) => {
console.log(event.data); // 打印发送过来的数据
});在上面的代码中，我们使用 setInterval() 函数每秒推送一次数据到客户端。客户端将接收到的事件打印到控制台上。
CORS
CORS 是浏览器使用的一种安全机制。它要求 Web 应用程序防止来自其他域的请求。如果某个资源不允许跨域请求，那么在客户端（浏览器）就无法直接从该资源进行请求。
想要解决这个问题，可以通过在服务端添加一些 HTTP 头字段来允许跨域请求。CORS 提供了一种安全、能够支持资源的访问权限控制的机制。
实现 CORS 的步骤
- 服务器端在响应头上添加 Access-Control-Allow-Origin 字段，允许客户端访问该资源。
- 客户端使用 XMLHttpRequest 对象发起请求。在请求头中设置对应字段以实现跨域。
- 服务器端处理请求并返回数据。
代码示例
下面是一个基本的示例，它使用 Node.js 作为服务器端，同时使用 XHR 对象来处理 CORS 请求。
Node.js 服务器端代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- --- - ---------------
----------------------- ---- -- -
----- ----- - ------------------ ------------
----- -------------- - ------------------------- ------------------------- -- -----------------
----- ------ - -------------------
-- --------------------------------- -
-------------------------------------------- --------
-
------------------ - --------------- ------------ ---
---------------- ---------
----------
----------------客户端代码：
-- -------------------- ---- -------
----- --- - --- -----------------
---------------------- - ---------- -
-- ---------------- --- - -- ----------- --- ---- -
------------------------------ -- -------
-
--
--------------- ------------------------- ------
------------------------------------ --------------
------------------------------------- ------ - - ----------- -- -----
------------------- - ----- -- -- ------
-----------在服务器端代码中，如果 Origin 头使包含在允许的跨域地址中，就启用 Access-Control-Allow-Origin 头来允许跨域请求。在客户端代码中，我们使用了 XHR 对象来完成请求。
可以看到，CORS 的实现比 SSE 更加复杂。但是，CORS 所提供的功能也更加丰富。它可以通过添加请求头信息来实现授权、缩短超时时间和允许 cookie 等进一步的资源控制。
总结
本文介绍了 SSE 和 CORS 在服务器和客户端交互中的实现方式和相关的代码示例。它们都提供了通过 Web 应用程序完成数据传输的机制。然而，它们的目标和使用都有所不同。
SSE 用于能持续地向客户端推送数据的场景，而 CORS 用于控制跨域请求。浏览器开发人员可以根据需要选择这两种技术来实现数据交互。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d2e2cdb5eee0b525a3a9e9