跨域问题一直是前端开发中比较常见的问题，如果不解决，那么前端应用就无法在不同的域名下运行，这在某些场景下是非常不方便的。本文将介绍两种跨域解决方案：SSE 和 CORS，以及如何使用它们来解决前端开发中的跨域问题。
SSE
SSE（Server-Sent Events）是一种基于 HTTP 的跨域解决方案，它允许服务器向客户端推送数据，而不需要客户端发送请求。使用 SSE 可以解决前端中“轮询请求”的问题，减少网络流量和服务器的压力。
使用 SSE 需要在客户端创建一个 EventSource 对象来接收来自服务器的消息，服务器发送事件的格式需要是“text/event-stream”。下面是一个简单的例子，演示了如何使用 SSE：
const eventSource = new EventSource('http://localhost:3000/sse');
eventSource.onopen = function() {
console.log('SSE 连接已建立！');
};
eventSource.onmessage = function(event) {
console.log('收到来自服务器的消息：', event.data);
};
eventSource.onerror = function(event) {
console.log('发生错误。');
};使用 SSE 的优点是它可以在维持长连接的同时与服务器进行实时通信，因此适合用于需要即时更新数据的应用场景。不过需要注意的是，SSE 并不是所有浏览器都兼容，不支持 IE。
CORS
CORS（Cross-Origin Resource Sharing）是一种基于 HTTP 的跨域解决方案，它允许客户端发起跨域请求和服务器返回跨域响应。使用 CORS 可以让前端应用向不同的域名下的服务器发送请求和接收响应。
使用 CORS 需要在服务器端设置响应头（Access-Control-Allow-Origin），允许客户端跨域访问。下面是一个简单的例子，演示了如何使用 CORS：
app.get('/cors', function(req, res) {
res.header('Access-Control-Allow-Origin', '*');
res.send('Hello, CORS!');
});上面的代码中，我们设置了响应头“Access-Control-Allow-Origin”为“*”，表示允许任意域名跨域访问。如果只允许特定的域名跨域访问，也可以替换为相应的域名。
使用 CORS 的优点是它可以在客户端与服务器端之间建立正常的 HTTP 请求和响应，因此适合用于需要请求数据或提交表单的应用场景。不过需要注意的是，CORS 只适用于同源请求和跨域简单请求，对于跨域复杂请求（比如包含文件上传、cookie 等的请求）需要进行额外的配置。
总结
本文介绍了两种跨域解决方案：SSE 和 CORS，它们都能够解决前端开发中的跨域问题，但是使用场景不同。SSE 适用于实时通信的场景，CORS 适用于普通的请求和响应场景。在实际开发中，需要根据具体的业务场景选择合适的跨域解决方案。
参考资料
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a774ebadd4f0e0ff08edcb