如何实现跨域的 SSE 连接？-JavaScript中文网-JavaScript教程资源分享门户

在Web开发中，开发人员经常需要从一个域中的一个页面获取数据而展示在另一个域的页面上。然而在现代浏览器中，出于安全考虑，JavaScript不能直接从一个域中向另一个域请求数据。这就是所谓的“跨域问题”(Cross-Site Scripting, XSS)。其中的一种解决方案是使用Server-Sent Event (SSE)连接。本文将介绍如何在前端中实现跨域的SSE连接。

SSE介绍

SSE是一种服务器推送技术，通过基于HTTP的事件流(SSE Event Stream)，可以在客户端与服务器端之间建立一条持久连接。在客户端与服务器端建立连接后，服务器端可以发送事件到客户端，并通过事件流中的标识符将事件进行标识，客户端可以根据不同的标识符对不同的事件进行处理。SSE连接的一个重要特点是其是单向连接，只能由服务器端向客户端推送消息。

SSE是利用的是HTML5标准中的EventSource接口，这个接口提供了与SSE连接进行交互的各种方法。

例子

接下来，我们将从以下方面讨论如何在前端实现跨域的SSE连接：

服务器端
客户端

服务器端

服务器端需要发送一个正确格式的SSE Event Stream，然后通过HTTP的"Content-Type"头声明为"text/event-stream"。

以下是一个简单的Node.js服务器端，可以启动一个SSE Event Stream服务器：

// javascriptcn.com 代码示例
var http = require('http');
var server = http.createServer(function(req, res) {
    res.writeHead(200, {
        'Content-Type': 'text/event-stream', 
        'Cache-Control': 'no-cache',
        'Access-Control-Allow-Origin': '*' // 允许跨域请求
    });
    setInterval(function() {
        res.write('event: ping\n');
        res.write('data: '+ new Date().getTime() +'\n\n');
    }, 5000);
});

server.listen(3000, '127.0.0.1');

上面的代码中，我们使用Node.js的http模块创建一个服务器。我们在每5000毫秒（5秒）内间隔的时间内发送一个SSE事件到客户端。

客户端

在客户端实现SSE连接需要以下几个步骤：

创建一个新的EventSource对象，在这个过程中需要指定服务器端的URL地址。
监听onmessage事件，这样我们可以处理从服务器端发送的消息。

以下是一个简单的HTML页面，该页面创建一个SSE连接，可以接收来自服务器端的消息：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>SSE Test</title>
  </head>
  <body>
    <h1>SSE Test</h1>
    <div id="result"></div>
    <script>
        var source = new EventSource("http://127.0.0.1:3000/");
        source.onmessage = function(event) {
            document.getElementById("result").innerHTML += event.data+"<br>";
        };
    </script>
  </body>
</html>

可以看到，在这个代码中，我们首先创建了一个EventSource对象，并指定URL为服务器端的地址。然后，我们监听了onmessage事件，并将事件数据添加到id为"result"的HTML元素中。最后，启动应用程序，并查看SSE连接是否正常工作。您应该能够看到来自服务器端的消息以及每个消息的时间戳。

解决跨域问题

由于SSE连接需要跨域访问，如果我们在使用SSE的过程中没有解决跨域问题，我们将会遇到如下错误：

EventSource's response has a MIME type ("text/event-stream") that is not "text/plain". Aborting the connection.

为了解决这个问题，我们需要在服务端设置Access-Control-Allow-Origin: *这个HTTP头，这样浏览器就可以允许在页面内跨域请求了。

总结

通过使用SSE连接，我们可以在Web上实现跨域请求，从而向客户端推送实时数据，可以让我们更好地进行数据交互和应用程序开发。

在本文中，我们通过Node.js实现了一个简单的SSE服务器，并且在客户端使用了纯粹的浏览器功能创建了一个SSE连接。

通过使用SSE连接，我们不仅可以使应用程序更加实时，而且还可以从服务器端向客户端推送实时数据，可以优化应用程序客户端模型的性能。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6583b5b1d2f5e1655de895ab