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