Socket.io Express Http服务器后端，CORS错误

Question

我正在开发一个使用express作为后端的应用程序。然后我想添加socket.io来实现一些实时聊天功能。poster上的一切都非常出色，但当我的前端react代码用react查询生成get-req时，我会得到一个cors错误。

在我用http服务器实现socket.io相关代码之前，我没有这个问题。

免责声明：我已经看过类似问题的解决方案，我确实需要使用express，我看到的所有解决方案都只是针对基于http服务器的应用程序。

这里有一些代码：

后端：

require("dotenv").config();
const PORT = process.env.PORT;
const express = require("express");
const cors = require("cors");
const {
createServer
} = require("http");
const {
Server
} = require("socket.io");
const {
accountRouter,
chatRouter,
commentRouter,
searchRouter,
authRouter,
} = require("./Routes");
const WebSocketService = require("./Services/WebSocketService");
const {
connection
} = require("./Services/Database");
connection();
const app = express();
const httpServer = createServer(app);
const io = new Server(httpServer, {
cors: {
origin: "http://localhost:3000",
methods: ["GET", "POST", "DELETE"]
},
});
const onConnection = (socket) => {
console.log(`User socketId: ${socket.id} connected`)
WebSocketService(io, socket);
};
io.on("connection", onConnection);
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({
extended: true
}));
app.use("/unis", searchRouter.unisRouter);
app.use("/courses", searchRouter.coursesRouter);
app.use("/files", searchRouter.fileRouter);
app.use("/comments", commentRouter);
app.use("/chats", chatRouter);
app.use("/account", accountRouter);
app.use("/signup", authRouter.signupRouter);
app.use("/login", authRouter.loginRouter);
app.use("/admin", authRouter.adminRouter);
httpServer.listen(PORT, () => {
console.log(`Server ready at ${process.env.PUBLIC_URL}:${PORT}`);
});

前端：

import React, {
useEffect,
useState
} from "react";
import "./styles.scss";
import axios from "axios";
import {
useQuery
} from "react-query";
const fetchAllUnis = async() => {
const {
data
} = await axios.get("localhost:4000/unis");
return data;
};
export const Unis = ({
ViewComponent,
activeClass,
BreadCrumbData,
SetBreadCrumbData,
}) => {
const {
data,
error,
isLoading,
isError
} = useQuery("unis", fetchAllUnis);
return ( <
div className = {
activeClass === "grid" ? "unis grid" : "unis"
} > {
data &&
data.map(
({
_id: itemID,
uniName: itemName,
uniLogoPath: itemLogoPath,
uniCourses,
}) => ( <
ViewComponent key = {
itemID
}
props = {
{
itemID,
itemName,
itemLogoPath,
itemType: "uni",
courseCount: uniCourses.length,
}
}
/>
)
)
} <
/div>
);
};

Answer 1

原来我需要{crossdomain: true}作为axios调用的选项。

const fetchAllUnis = async() => {
const {
data
} = await axios.get("localhost:4000/unis", {crossdomain: true});
return data;
};