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

Question

我正在开发一个使用 express 作为后端的应用程序。然后我想为一些实时聊天功能添加 socket.io。一切都在邮递员上运行得非常好，但是当我的前端反应代码使用反应查询进行 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;
};