解决使用 SSE 时遇到的 CORS 问题-JavaScript中文网-JavaScript教程资源分享门户

什么是 SSE

SSE（Server-Sent Events）是一种基于 HTTP 协议的服务器推送技术，它允许服务器向客户端推送数据，而无需客户端发起请求。SSE 主要用于实时推送数据给客户端，比如实时聊天、股票行情、天气预报等。

什么是 CORS

CORS（Cross-Origin Resource Sharing）是一种安全机制，用于限制跨域访问。当一个浏览器从一个域名访问另一个域名的资源时，就会触发跨域访问，这时如果没有 CORS 机制的限制，就可能会导致安全问题。

使用 SSE 时遇到的 CORS 问题

在使用 SSE 进行服务器推送时，可能会遇到 CORS 问题。比如，当客户端从 http://example.com 访问 SSE 服务的时候，如果 SSE 服务的响应头中没有设置 Access-Control-Allow-Origin 字段，那么浏览器就会报错，提示跨域访问被拒绝。

解决 SSE 跨域访问的方法

解决 SSE 跨域访问的方法是在 SSE 服务的响应头中设置 Access-Control-Allow-Origin 字段。这个字段的值可以设置为 *，表示允许任何域名访问。也可以设置为具体的域名，表示只允许该域名访问。

下面是一个设置 SSE 响应头的示例代码：

// javascriptcn.com 代码示例
const express = require('express');
const app = express();

app.get('/sse', (req, res) => {
  res.set({
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
    'Access-Control-Allow-Origin': '*'
  });

  const sendEvent = (event, data) => {
    res.write(`event: ${event}\n`);
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  };

  setInterval(() => {
    sendEvent('message', { text: 'Hello World!' });
  }, 1000);
});

app.listen(3000, () => {
  console.log('SSE server is running at http://localhost:3000/sse');
});

在这个示例代码中，我们使用 Express 框架搭建了一个 SSE 服务。在 SSE 响应头中设置了 Access-Control-Allow-Origin 字段，并将其值设置为 *，表示允许任何域名访问。在 sendEvent 函数中，我们向客户端推送了一个名为 message 的事件，事件的数据是一个包含一个 text 属性的对象。这个 SSE 服务每秒钟向客户端推送一条消息。

总结

使用 SSE 进行服务器推送时，可能会遇到 CORS 问题。要解决这个问题，需要在 SSE 服务的响应头中设置 Access-Control-Allow-Origin 字段。这个字段的值可以设置为 *，表示允许任何域名访问。也可以设置为具体的域名，表示只允许该域名访问。在实际应用中，我们可以使用 Express 框架搭建 SSE 服务，并在响应头中设置 Access-Control-Allow-Origin 字段，以解决跨域访问问题。

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