时间戳

首页 > 解决方案 > 使用节点、反应和 socket.io 的 Socket.io cors 错误

node.js - 使用节点、反应和 socket.io 的 Socket.io cors 错误

问题描述

我们正在使用 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 策略阻止：当请求的凭据模式为“包含”时，响应中的“Access-Control-Allow-Origin”标头不得为通配符“*”。XMLHttpRequest 发起的请求的凭证模式由 withCredentials 属性控制

标签： node.jsreactjssockets

解决方案

对于 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 版本相同。

推荐阅读