「问题解决」如何解决 socket.io 的跨域问题？

问题描述

前端使用 socket.io 进行实时通信时，可能会遇到跨域问题。例如，当客户端运行在 http://localhost:3000/ 上，而服务端运行在 http://localhost:4000/ 上时，将无法建立连接。

解决方案

为了解决跨域问题，我们可以采用以下两种方法。

方法一：设置跨域选项

可以通过设置 cors 选项来允许 socket.io 跨域访问。在服务端代码中加入以下代码：

const io = require("socket.io")(server, {
  cors: {
    origin: "http://localhost:3000",
    methods: ["GET", "POST"]
  }
});

上述代码指定允许的跨域地址为 http://localhost:3000，允许的 HTTP 方法为 GET 和 POST。这样就能够允许来自此地址的请求。如果有多个允许的地址，可以使用数组：

const io = require("socket.io")(server, {
  cors: {
    origin: ["http://localhost:3000", "http://example.com"],
    methods: ["GET", "POST"]
  }
});

方法二：使用代理

另一种方法是使用代理，在客户端代码中加入以下代码：

// javascriptcn.com 代码示例
const socket = io("http://localhost:4000", {
  path: "/socket.io",
  transports: ["websocket"],
  extraHeaders: {
    "my-custom-header": "abcd1234"
  }
});

socket.io.opts.hostname = "localhost";
socket.io.opts.port = 3000;

上述代码将客户端的请求转发到本地 http://localhost:3000 地址。在服务端代码中，只需要监听默认的地址即可。

const io = require("socket.io")(server);

注意事项

无论是哪种解决方案，在设置跨域选项时，应该仅允许必要的来源，并限制允许的 HTTP 方法。这样可以减少跨站脚本攻击（XSS）和恶意请求的风险。

示例代码

完整的客户端及服务端示例代码如下：

// javascriptcn.com 代码示例
// 客户端代码
const socket = io("http://localhost:4000", {
  path: "/socket.io",
  transports: ["websocket"],
  extraHeaders: {
    "my-custom-header": "abcd1234"
  }
});

socket.io.opts.hostname = "localhost";
socket.io.opts.port = 3000;

socket.on("connect", () => {
  console.log("Connected");
});

socket.on("message", (data) => {
  console.log("Received message:", data);
});

socket.emit("message", "Hello, world!");

// 服务端代码
const http = require("http");
const server = http.createServer();

server.listen(4000);

const io = require("socket.io")(server);

io.on("connection", (socket) => {
  console.log("A client connected");

  socket.on("message", (data) => {
    console.log("Received message:", data);
    socket.emit("message", "Hi, client!");
  });

  socket.on("disconnect", () => {
    console.log("A client disconnected");
  });
});

总结

跨域问题是使用 socket.io 进行实时通信时常见的问题，但是通过设置跨域选项或使用代理可以很容易地解决。在设置跨域选项时，应该仅允许必要的来源，并限制允许的 HTTP 方法以降低风险。

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