随着 Web 应用程序的不断发展，实时通信变得越来越重要。但是，传统的 HTTP 请求和响应机制在实时通信的情况下效率较低，因为它们需要不断地进行轮询，这对服务器和客户端的性能造成了一定的负担。Server-Sent Events (SSE) 协议则通过一种长时间打开的 HTTP 连接，实现服务器和客户端之间实时双向通信的目的。
然而，当我们在浏览器中使用 SSE 协议进行身体推送消息的时候，可能会遇到跨域问题，这时候需要注意处理。
跨域问题
跨域问题是指当客户端 JavaScript 请求服务器资源时，该请求的 URL 的协议、主机名、端口与当前页面 URL 不同时，就会产生跨域问题。在默认情况下，浏览器会阻止跨域访问，这是为了保护用户隐私和减弱跨站点脚本攻击。
在使用 SSE 协议的时候，我们通常是在 JavaScript 代码中使用 EventSource 进行连接，如下所示：
const source = new EventSource("http://example.com/stream");
source.onmessage = function(event) {
console.log(event.data);
};如果我们的页面 URL 是 http://foo.com，那么这个请求会被认为是跨域请求，浏览器会阻止它的访问。因此，我们需要找到一种可行的解决跨域问题的方法。
解决跨域问题的方法
在 SSE 协议中，可以使用 CORS（Cross-Origin Resource Sharing）来解决跨域问题。CORS 是一种机制，它允许 Web 页面从不同的域访问其资源。
在服务器端，我们需要设置响应头信息，告诉浏览器可以跨域访问哪些资源。这可以通过设置 Access-Control-Allow-Origin 头信息来实现。
在使用 SSE 协议时，我们可以设置 response headers 来允许跨域访问。在 PHP 代码中，可以这样设置：
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Access-Control-Allow-Origin: http://foo.com');这里的 Access-Control-Allow-Origin 头信息指定了可以访问 SSE 服务器的 Web 页面的 URL。这样，当 SSE 连接时，浏览器就会允许跨域访问。
示例代码
下面是一个使用 SSE 协议推送消息的示例代码，其中包含了解决跨域问题的相关代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
---- -------------------
--------
----- ------ - --- -----------------------------------------
---------------- - --------------- -
-------------------------------------------- - -----------
--
---------
-------
-------在服务器端，可以这样实现发送 SSE 消息的代码：
-- -------------------- ---- -------
--------------------- --------------------
---------------------- -----------
------------------------------------ -----------------
----- ------ -
---- ------ - - ------ - -------
--------
---------
-该代码将每秒钟当前时间作为 SSE 消息发送给客户端。
总结
SSE 协议提供了一种高效的解决方案，实现服务器和客户端之间实时通信的目的。但是，在浏览器中使用 SSE 协议时，我们需要注意跨域问题，通过设置 response headers 实现解决。除了 SSE，还有其他的实时通信技术，比如 WebSocket，也需要解决跨域问题。跨域问题是 Web 开发中常见的问题，它需要我们在设计 Web 应用程序时做好相关的规划和处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6471592e968c7c53b0f3b5fe