如何在 Socket.io 中與 Heroku 服務器建立 Socket 連接？

Question

我制作了一個完整的堆棧 mern 應用程序，並將 nodejs 后端托管在 heroku 中，前端在 netlify 上運行。 為 heroku 和 netlify 設置了 All.env 變量，我也設置了 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}`));

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

從谷歌開發者控制台我看到了這個。

開發者控制台 Output

來自開發者控制台網絡部分的錯誤

Answer 1

查看您的屏幕截圖，您似乎沒有在后端正確配置 cors。 要么將 * 作為值，以便允許來自任何地方的請求，要么將前端應用程序的 URL 代替后端 API 的 URL。 （ https://ural-shop.herokuapp.com/是您配置的，它應該是您的前端應用程序的 URL）

讓我知道它是否有效。

Answer 2

我在使用相同的技術堆棧時遇到了同樣的問題。 這花了我 3 天的時間才發現這都是 CORS 問題。 但是您需要將 Heroku 服務器包含在 CORS 白名單中。

根據官方文檔：

由於 Socket.IO v3，您需要顯式啟用跨域資源共享 (CORS)。

客戶站點

所以，你要做的就是根據環境指定正確的URL。 如果您只想設置生產 URL，它將在本地或生產環境中工作。

我的動態是這樣的：

const IS_PROD = process.env.NODE_ENV === "production";
const URL = IS_PROD ? "yoursite.herokuapp.com" : "http://localhost:5000";
const socket = io(URL);

服務器端

...
const io = socket(server, {
        cors: {
            origin: ["http://localhost:3000", "yoursite.herokuapp.com"],
        },
    });

非常重要：您還必須確保您的開發與生產端同步。 否則，您將對其進行測試並看到相同的錯誤，但這僅僅是因為您也沒有更新您的產品。 是的，這種愚蠢的錯誤可能會發生......

希望對處於相同情況的人有所幫助。 這解決了我的問題。