使用 Server-Sent Events 解决 CORS 问题的案例指导
在前端开发中，经常会遇到跨域请求的问题，尤其是涉及到不同域名的 AJAX 请求时，浏览器会出现“跨域访问被禁止”的错误。解决跨域请求的方法有很多，其中一种较为简单的方法是使用 Server-Sent Events。
Server-Sent Events（SSE）是一种基于 HTTP 的协议，用于服务器向客户端推送实时数据。SSE 通过建立一条持久连接，可以在服务器有新数据时实时地向客户端推送数据。相比于 WebSockets，SSE 更加轻量级，且支持所有现代浏览器。在解决跨域请求问题时，SSE 可以在不需要修改服务器端代码的情况下，轻松地实现跨域请求。
下面我们来看一个使用 SSE 解决跨域问题的实例。
假设我们需要从一个不同域名的服务器上获取实时数据，服务器地址为 https://example.com/stream。由于浏览器的同源策略，我们无法直接进行 AJAX 请求。这时，我们可以使用 SSE 在客户端与服务器之间建立一个持久连接，通过不断从服务器端接收数据来实现实时更新。以下是示例代码：
首先，我们需要在客户端建立一个 EventSource 对象：
const source = new EventSource('https://example.com/stream');然后，我们可以监听这个对象的 message 事件来接收从服务器端传回的数据：
source.addEventListener('message', (event) => {
const data = JSON.parse(event.data);
// 在这里进行数据的处理
}, false);在服务器端，我们需要确保发送的数据被标记为 text/event-stream，这样浏览器才能正确地处理数据。以下是一个 Node.js 的示例代码：
// javascriptcn.com 代码示例
const http = require('http');
const server = http.createServer(function(req, res) {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Access-Control-Allow-Origin': '*'
});
setInterval(() => {
const data = {foo: 'bar'};
res.write(`data: ${JSON.stringify(data)}\n\n`);
}, 1000);
});
server.listen(3000);在上述代码中，我们通过 res.write 发送数据，并将数据标记为 text/event-stream。同时，我们也需要设置 Access-Control-Allow-Origin 响应头，以允许跨域访问。通过这种方法，我们就可以在浏览器中实时接收到来自不同域名服务器的数据了。
总结：
通过使用 Server-Sent Events 技术，我们可以轻松地实现跨域请求，并实时地从服务器端接收数据。SSE 较为轻便，对服务器端也没有过多的要求，可以方便地处理不同域名之间的数据传输。在实际应用中，我们可以根据需要使用 SSE 技术来优化数据传输方案。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652b4c187d4982a6ebd45f21