CORS 策略：没有“Access-Control-Allow-Origin”，这发生在套接字中

Question

我正在使用 socket.io 创建一个应用程序，并使用 ReactJs 作为前端，NodeJs 作为后端。我在项目中实现了套接字，以便根据一次存在的用户在前端和后端之间进行通信。当我在本地主机上执行它时，一切都工作正常，但在项目完成后，我在 netlify 上托管了后端和前端，并且我收到了如下的 cors 策略错误：

Access to XMLHttpRequest at 'https://google-docs-backend.netlify.app/socket.io/?EIO=4&transport=polling&t=Oog1MmL' from origin 'https://google-docs-frontend.netlify.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET https://google-docs-backend.netlify.app/socket.io/?EIO=4&transport=polling&t=Oog1WY0 net::ERR_FAILED 404 (Not Found)

我期望应该建立套接字连接，因为它在本地主机上工作，并且前端和后端都应该正确通信。

我尝试传递一些标头，如下所示，但没有成功：

const corsOptions ={
  origin: CLIENT_URL,     // "https://google-docs-frontend.netlify.app"
  credentials:true,
  optionSuccessStatus:200
}

const app = express();

app.use(cors(corsOptions));

app.use((req, res, next) => {
  res.header(
    "Access-Control-Allow-Origin",
    "https://google-docs-frontend.netlify.app"
  );
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  next();
});

const io = require("socket.io")(3001, {
  cors: {
    origin: CLIENT_URL,        // "https://google-docs-frontend.netlify.app"
    method: ["GET", "POST"],
  },
});

现在下面是我调用套接字的前端代码

  useEffect(() => {
    const s = io(SOCKET_URL);      // "https://google-docs-backend.netlify.app/"
    setSocket(s);
    return () => {
      s.disconnect();
    };
  }, []);

我想建立从前端到后端的套接字连接。

Answer 1

我找到了解决办法。早些时候，我在 netlify 上托管我的后端，它导致了这个问题。现在我在 render.com 上托管了我的应用程序，它运行得很好。