Socket.io Express Http-Server 后端，CORS 错误

Question

我正在开发一个使用 express 作为后端的应用程序。 然后我想添加 socket.io 以获得一些实时聊天功能。 一切在 postman 上都运行得非常好，但是当我的前端反应代码使用反应查询进行 get req 时，我收到 cors 错误。

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

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

这是一些代码：

后端：

 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; };