Server-sent 事件是一种用于在浏览器和服务器之间发送事件的技术，它可以提供实时数据更新、聊天和即时通信等功能。但是，在使用 Server-sent 事件时，我们可能会遇到 Safari 浏览器上的跨域问题。本文将介绍如何解决这种问题。
什么是跨域问题？
在 Web 开发中，浏览器允许页面从一个 URL 加载其他资源，例如脚本、样式表和图片等。但是，由于安全性考虑，浏览器实现了同源策略，只允许页面从同一个域名下加载其他资源。如果页面试图加载不同域名下的资源，就会遇到跨域问题。
什么是 Server-sent 事件？
Server-sent 事件是一种浏览器和服务器之间通信的技术。它允许服务器推送数据到客户端，而不是等待客户端请求数据。这种技术与 AJAX 相似，但是它是一种持久连接，可以保持长时间的通信。
Safari 浏览器上的跨域限制
在 Safari 浏览器中，使用 Server-sent 事件时，如果服务器发送的响应没有设置正确的 MIME 类型，就会遇到跨域限制。例如，在以下代码中，我们尝试从另一个域名加载数据：
const eventSource = new EventSource('https://example.com/events');
eventSource.onmessage = (event) => {
console.log(event.data);
};如果 https://example.com/events 服务器响应中没有设置正确的 MIME 类型 text/event-stream，Safari 就会拒绝接受响应，抛出错误：
SecurityError (DOM Exception 18): The operation is insecure.
这是因为 Safari 要求服务器设置正确的 MIME 类型，以确保数据不被篡改或劫持。
解决方法
要解决这个问题，我们需要在服务器端设置正确的 MIME 类型。具体来说，在发送 Server-sent 事件时，我们需要设置响应头的 Content-Type 字段为 text/event-stream，例如：
response.writeHead(200, {
'Content-Type': 'text/event-stream'
});
response.write('data: hello\n\n');如果您使用的是 Express，您可以使用 res.set 方法来设置响应头：
app.get('/events', (req, res) => {
res.set('Content-Type', 'text/event-stream');
res.write('data: hello\n\n');
});然后，我们可以在客户端使用 EventSource 构造函数来订阅事件：
const eventSource = new EventSource('/events');
eventSource.onmessage = (event) => {
console.log(event.data);
};现在，我们可以在 Safari 浏览器中正常地接收数据了。
结论
Server-sent 事件是一种强大的浏览器和服务器之间通信的技术，但是在 Safari 浏览器中，我们需要设置正确的 MIME 类型来解决跨域问题。使用此文章中提供的方法，您将能够避免这个问题，并顺利地使用 Server-sent 事件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674ac0b1a1ce006354a95037