什么是 SSE？
SSE（Server-Sent Events）是一种浏览器与服务器间的单向通信机制，它可以让服务器主动推送数据到客户端，而客户端无需发送请求，可以实时地接收来自服务器的数据。SSE 是一种基于 HTTP 协议的轻量级通信技术，常用于实时更新数据的场景。
SSE 的跨域访问问题
SSE 的跨域访问问题与其他网络通信技术类似，由于浏览器的同源策略限制，我们无法直接访问另一个域名下的 SSE 服务。例如，如果你的网站域名为 www.example.com，想要从 api.example.com 接收 SSE 数据，就会出现跨域访问的问题。
解决方法
1. JSONP 回调
JSONP（JSON with Padding）是一种通过在页面中动态加载 JavaScript 文件的方式，调用跨域的 API 并接受返回值的方法。我们可以通过使用 JSONP 回调函数来实现对 SSE 数据的接收和处理。
示例代码：
-- -------------------- ---- ------- -------- --------------- - --------------------- ------ ------ - ----- --- - --- ------------------------------------------ ------------------------------- ----- -- - -- --- --- --------- ----- ----- --------- ---- ----- ------ - --------------------------------- ---------- - ----------------------------------------------------------------------------- ---------------------------------- ---
在上述代码中，我们将 SSE 数据通过 JSON.stringify 编码并通过 URL 参数的方式传递给 sse-callback 回调函数，然后通过动态创建 script 标签来触发 sse-callback 函数。在 sse-callback 函数中，我们可以通过解码获得 SSE 数据，并调用 handleSSE 函数来处理数据。
function sseCallback(data) {
const decodedData = JSON.parse(decodeURIComponent(data));
handleSSE(decodedData);
}2. CORS
CORS（Cross-Origin Resource Sharing）是一种浏览器机制，允许网页向跨源服务器请求数据。我们可以通过配置服务器的 CORS 策略来解决 SSE 跨域访问问题。
对于 SSE 服务，我们需要在服务器的响应头中添加以下字段：
Access-Control-Allow-Origin: http://www.example.com Access-Control-Allow-Methods: GET Access-Control-Allow-Headers: Accept, Cache-Control, Keep-Alive Access-Control-Allow-Credentials: true Access-Control-Expose-Headers: *
其中，Access-Control-Allow-Origin 是必需的字段，它指定了哪些网站可以跨域访问该 SSE 服务（如果允许所有域名访问，可以设置为 *）；Access-Control-Allow-Methods 指定了允许的 HTTP 请求方法；Access-Control-Allow-Headers 指定了允许的 HTTP 请求头；Access-Control-Allow-Credentials 表示是否允许跨站请求发送身份凭证；Access-Control-Expose-Headers 指定了响应头中可以被 JavaScript 访问的额外字段。
示例代码：
const sse = new EventSource('http://api.example.com/sse');
sse.withCredentials = true; // 允许发送身份凭证
sse.addEventListener('message', event => {
handleSSE(event.data);
});在上述代码中，我们通过设置 withCredentials 属性为 true，允许 SSE 服务发送身份凭证（例如 cookie），从而获得更高级别的安全保护。
总结
SSE 跨域访问问题是 Web 开发中比较常见的问题，通过以上两种方法，我们可以解决该问题并实现浏览器与服务器的实时通信。在选择解决方法时，我们需要考虑安全性、可用性、易用性等方面的因素，并进行灵活应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f69508f6b2d6eab3f2a0d1