使用节点、反应和 socket.io 的 Socket.io cors 错误答案

【问题标题】：Socket.io cors error by using node, react and socket.io使用节点、反应和 socket.io 的 Socket.io cors 错误
【发布时间】：2020-03-13 19:31:08
【问题描述】：

我们使用 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 属性控制

【问题讨论】：

查看stackoverflow.com/questions/24058157/…
仍然出现同样的错误

标签： node.js reactjs sockets

【解决方案1】：

const express = require("express");
const app = express();
const http = require("http").createServer(app);
const socketio = require("socket.io");
const cors = require("cors");
const io = socketio(http, {cors:{origin:"*"}});

【讨论】：

【解决方案2】：

按照这些步骤，您可以摆脱这些错误。

// 1) on server side

const cors = require('cors');
const socketio = require('socket.io')
const http = require('http');
const server = http.createServer(app);

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

// 2) add these middlewares
app.use(cors())
app.options('*', cors());

// 3) on client-side
import io from 'socket.io-client'
let socket = io.connect(localhost:8080, { transports: ['websocket'] }) // your local server

【讨论】：

【解决方案3】：

@user4860402 给了我解决方案，事情是默认情况下 npm 正在安装 socket.io 客户端 v 2.X.X 但在服务器上我使用的是最新版本（也由 npm 提供）3.0.5 所以包括 400 错误在内的所有问题都是因为客户端和服务器版本不匹配。

【讨论】：

【解决方案4】：

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

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

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

奖励：如果遇到错误请求，请确保客户端和服务器的 socket.io 版本相同。

【讨论】：

非常感谢，这个答案给了我解决方案。
这对我有用，我的客户端 package.json 是“socket.io-client”：^2.4.0，而我的后端 package.json 是“socket.io”：^4.4.0。我从客户端 npm 卸载了 socket.io-client，然后使用 npm install socket.io-client@4.4.0 重新安装并连接了我的 websocket

【解决方案5】：

请允许所有服务器端socket.io

const socketIO = require('socket.io')(server, { origins: '*:*'});

或者你可以设置socketIO origins为*

socketIO.set('origins', '*:*');

【讨论】：

没有任何区别，记住我在客户端和服务器上都使用 socket.io 版本 2.2.0
你检查过你的 .htaccess 文件了吗？也许它可以帮助你
从哪里可以访问这个？
请检查您的服务器>>应用并添加Header add Access-Control-Allow-Origin "*" Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type" Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

【解决方案6】：

尝试使用 cors 凭据配置：

app.use(cors({credentials: true}));

【讨论】：

没有任何区别