CORS拒绝连接套接字io

Question

我试图使用套接字io实时发送和接收数据，但是当我运行服务器并打开使用套接字连接的客户端页面时。io-client，我得到一个错误

我安装了cors并使用它，就像我以前多次做过的那样，我尝试设置我的响应头以允许来自不同来源的访问，但没有任何工作。

这是我得到的错误:

Access to XMLHttpRequest at 'http://localhost:5000/socket.io/?EIO=4&transport=polling&t=ONQYon3' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是我的服务器端代码

require("dotenv").config();
const express = require("express");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const cors = require("cors");
const { Server } = require("socket.io");
const app = express();
const server = require("http").Server(app);
const io = new Server(server);
app.use(bodyParser.json());
app.use(
cors({
origin: "*",
})
);
app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", "*");
});
io.on("connection", (socket) => {
console.log("a user connected");
});
const port = process.env.PORT || 5000;
const url = process.env.MONGO_URI;
const start = async () => {
try {
await connectDB(url);
server.listen(port, (req, res) => {
console.log(`Server is listening on port ${port}`);
});
} catch (error) {
console.log(error);
}
};
start();

我在前端所做的就是使用套接字。在react应用程序中使用Io-client库连接到服务器，就像这样。

import io from "socket.io-client";
const socket = io("http://localhost:5000");

感谢您的帮助

Answer 1

您需要将cors的选项传递给ioServer构造函数本身。

。而不是

const io = new Server(server);

你需要

const io = new Server(server, {
cors: {
origin: '*',
}
});

Answer 2

我能够解决这个问题。这是因为客户端和服务器运行在不同的端口上，甚至使用不同定义的套接字。io需要它自己的cors设置才能工作，我把它改成这个，它工作了。

const io = require("socket.io")(5000, {
cors: {
origin: "*",
},
});