使用 Server-Sent Events 实现跨域请求

在前端开发中，跨域请求是一个常见的问题。为了解决这个问题，我们通常使用 JSONP 或者 CORS 等技术来实现跨域请求。但是这些技术都有一些限制，比如 JSONP 只支持 GET 请求，而 CORS 需要服务器端进行特殊的配置。本文介绍另一种实现跨域请求的方法：使用 Server-Sent Events。

什么是 Server-Sent Events

Server-Sent Events（简称 SSE）是一种基于 HTTP 协议的服务器推送技术。它允许服务器向客户端发送事件流（event stream），客户端通过 EventSource API 接收这些事件流。SSE 的好处是它可以实现实时的数据更新，而不需要客户端轮询服务器。

如何使用 SSE 实现跨域请求

使用 SSE 实现跨域请求的方法很简单，只需要在客户端创建一个 EventSource 对象，并指定要请求的 URL 即可。服务器端需要发送一个带有 "Content-Type: text/event-stream" 的响应，并在响应体中发送事件流。下面是一个示例代码：

// 客户端代码
var source = new EventSource('http://example.com/sse');

source.addEventListener('message', function(event) {
  console.log('Received event: ' + event.data);
});

// 服务器端代码（Node.js）
var http = require('http');

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('data: ' + new Date().toLocaleTimeString() + '\n\n');
  }, 1000);
}).listen(3000);

在这个示例中，客户端创建了一个 EventSource 对象，指定要请求的 URL 为 http://example.com/sse。服务器端创建了一个 HTTP 服务器，每隔一秒钟向客户端发送一个事件流，事件流的内容为当前的时间。

需要注意的是，在服务器端响应头中需要设置 "Access-Control-Allow-Origin: *"，这样才能允许跨域请求。

总结

使用 SSE 实现跨域请求可以避免 JSONP 和 CORS 的一些限制，同时也可以实现实时的数据更新。但是需要注意的是，SSE 只支持单向通信，即只能从服务器端向客户端发送事件流，无法像 WebSocket 一样实现双向通信。

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