使用node、react和socket.io出现Socket.io cors错误

Question

我们使用 CORS 来允许所有来源

app.use(cors());

服务器运行在4000端口，客户端运行在3000端口

这是我的server.js代码

const cors = require("cors");
const http = require("http");
const socketIO = require("socket.io");

app.use(cors());

const port = process.env.PORT || process.env.DEFAULT_PORT;
console.log("port: ", port);
app.listen(port, () => {
  console.log(`App listening at ${port}...`);
});

const server = http.createServer(app);

const io = new socketIO(server, {
  transports: ["websocket"],

});

反应js代码

  constructor(props) {
    super(props);
    try {
      this.socket = io("http://localhost:4000", { transport: ["websocket"] });

      this.socket.on("Chat-event", data => {
        console.log("socketdata", data);
      });
    } catch (error) {
      console.log("hiterror", error)
    }
  }

在允许所有人的来源后，我不断在客户端收到此错误。

从源“ http://localhost: 3000”访问“ http://localhost:4000/socket.io/?EIO=3&transport=polling&t=Mv-SSIc ”处的XMLHttpRequest已被 CORS 策略阻止：当请求的凭据模式为“include”时，响应中的“Access-Control-Allow-Origin”标头不得为通配符“*”。XMLHttpRequest发起请求的凭证模式由withCredentials属性控制

Answer 1

对于 socket.io 版本 3.xx cors 配置已更改，我设法通过向套接字创建添加选项来修复它。也尝试过 2.xx 版本，它有效。

  const io = socketio(httpServer, {
  cors: {
    origin: "http://localhost:3000",
    methods: ["GET", "POST"],
    credentials: true
  }
});

这是资源https://socket.io/docs/v3/handling-cors/

额外好处：如果您遇到错误请求，请确保客户端和服务器具有相同版本的 socket.io。