node.js - 如何在 Socket.io 中与 Heroku 服务器建立套接字连接？

Question

我制作了一个完整的堆栈 Mern 应用程序，并在 Heroku 中托管 NodeJS 后端，前端在 Netlify 上运行。所有 .env 变量都为 heroku 和 netlify 设置，我还设置了 cors() 。该网站具有聊天功能，因此我使用 socket.io 来实现该功能，该功能过去在开发中效果很好。

这是我的heroku服务器(后端api)的链接https://ural-shop.herokuapp.com/

在messenger.js文件中(这是套接字连接发生的地方)

import React, { useEffect, useState, useRef } from "react";
import io from "socket.io-client";

const socketRef = useRef();

useEffect(() => {
      socketRef.current = io.connect("https://ural-shop.herokuapp.com/");
},[]);

index.js文件(后端主文件)

const express = require("express");
const app = express();
const http = require("http");
const server = http.createServer(app);
const socket = require("socket.io");

app.use(cors());

const io = socket(server, {
  cors: { origin: "https://ural-shop.herokuapp.com/" },
});

server.listen(PORT, () => console.log(`Server on port ${PORT}`));

我只放置了文件的必要部分。

从谷歌开发者控制台我看到了这一点。

Developer Console Output

Error From Network Section Of Developer console

Answer 1

查看您的屏幕截图，您似乎没有在后端正确配置 cors。要么将 * 作为值，以便允许来自任何地方的请求，要么将前端应用程序的 URL 而不是后端 API 的 URL 放在其中。 ( https://ural-shop.herokuapp.com/ 是您已配置的内容，它应该是您的前端应用程序的 URL)

让我知道它是否有效。