SSE 通信过程中出现的跨域解决方式-JavaScript中文网-JavaScript教程资源分享门户

简介

SSE（Server-Sent Events）是一种服务器推送技术，它允许服务器向客户端发送实时数据，而不需要客户端发送请求。SSE 通信过程中，跨域问题是一个常见的问题，本文将介绍 SSE 通信过程中出现的跨域问题及其解决方式。

SSE 通信过程

在 SSE 通信过程中，客户端通过 EventSource 对象与服务器建立连接。当服务器有数据更新时，服务器会向客户端发送数据，客户端通过监听 message 事件来获取数据。下面是一个简单的 SSE 通信示例：

const eventSource = new EventSource('/sse');

eventSource.addEventListener('message', (event) => {
  console.log(event.data);
});

在上面的示例中，客户端通过 EventSource 对象与服务器建立连接，并通过监听 message 事件来获取服务器发送的数据。

跨域问题

在 SSE 通信过程中，跨域问题是一个常见的问题。由于 SSE 通信是基于 HTTP 协议的，浏览器同源策略会限制跨域访问。如果服务器和客户端不在同一个域名下，那么客户端无法建立 SSE 连接。

解决方式

CORS

CORS（Cross-Origin Resource Sharing）是一种浏览器跨域访问资源的标准，它允许服务器在响应中设置 Access-Control-Allow-Origin 头部，从而允许指定的域名访问资源。在 SSE 通信中，服务器需要设置 Access-Control-Allow-Origin 头部，允许客户端的域名访问。

下面是一个示例代码：

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

http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Access-Control-Allow-Origin': 'http://localhost:3000'
  });

  setInterval(() => {
    res.write(`data: ${new Date().toLocaleString()}\n\n`);
  }, 1000);
}).listen(3001);

在上面的示例中，服务器设置了 Access-Control-Allow-Origin 头部，允许 http://localhost:3000 域名访问。客户端代码与之前的示例代码相同。

反向代理

如果服务器无法设置 Access-Control-Allow-Origin 头部，那么可以使用反向代理来解决跨域问题。反向代理是一种服务器代理技术，它可以隐藏服务器的真实 IP 地址，并将客户端请求转发到服务器上。

下面是一个示例代码：

// javascriptcn.com 代码示例
const http = require('http');
const httpProxy = require('http-proxy');

const proxy = httpProxy.createProxyServer({});

http.createServer((req, res) => {
  if (req.url === '/sse') {
    proxy.web(req, res, {
      target: 'http://localhost:3001'
    });
  } else {
    res.writeHead(200, {
      'Content-Type': 'text/html',
      'Access-Control-Allow-Origin': 'http://localhost:3000'
    });
    res.end(`
      <html>
        <head>
          <title>SSE</title>
        </head>
        <body>
          <script>
            const eventSource = new EventSource('/sse');

            eventSource.addEventListener('message', (event) => {
              console.log(event.data);
            });
          </script>
        </body>
      </html>
    `);
  }
}).listen(3000);

http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache'
  });

  setInterval(() => {
    res.write(`data: ${new Date().toLocaleString()}\n\n`);
  }, 1000);
}).listen(3001);

在上面的示例中，客户端通过访问 http://localhost:3000 来获取 SSE 数据。当客户端访问 /sse 路径时，反向代理会将请求转发到服务器 http://localhost:3001 上。服务器返回的数据会通过反向代理返回给客户端。

总结

本文介绍了 SSE 通信过程中出现的跨域问题及其解决方式。在 SSE 通信中，可以通过设置 Access-Control-Allow-Origin 头部或使用反向代理来解决跨域问题。

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