时间戳

首页 > 解决方案 > 如何在 Socket.io 中与 Heroku 服务器建立 Socket 连接？

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

问题描述

我制作了一个完整的堆栈 mern 应用程序，并将 nodejs 后端托管在 heroku 中，前端在 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}`));

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

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

开发者控制台输出

来自开发者控制台网络部分的错误

标签： node.jsreactjsexpressherokusocket.io

解决方案

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

让我知道它是否有效。

推荐阅读