如何使用 ngrok 公开 React 开发服务器和 websocket 服务器

Posted 2023-04-18

【中文标题】如何使用 ngrok 公开 React 开发服务器和 websocket 服务器

【英文标题】：How to expose both React development server and websocket server with ngrok

【发布时间】：2021-06-19 13:04:50

【问题描述】：

我正在使用 React 构建一个应用程序，在端口 3000 上运行，该应用程序依赖于用于 Web 套接字的（本地）服务器，在端口 3001 上运行。客户端-服务器通信在本地工作正常，但是当我遇到一些问题时尝试使用 ngrok 公开应用程序。特别是，我能够公开客户端（在端口 3000 上），但是当远程主机尝试打开与 Web 套接字的连接时，客户端会联系远程主机的服务器而不是我的服务器。 前段时间我用 ngrok 暴露了 react 客户端，请求被正确发送到我的本地机器，但是使用 web sockets 我遇到了一些麻烦。

这是为客户端打开连接的代码：

const socket = io('http://localhost:3001');

在我得到的服务器上：

const socket = require('socket.io');
const app = express();

const server = app.listen(3001,()=> console.log('Server listening on port 3001'));

const io  = socket(server,
    cors:  origin: "*" 
);
io.on('connection', (socket) => ...

谁能帮帮我？

【参考方案1】：

您需要在您的服务器和本地 PC 中启用 CORS 标头。 如果没有 CORS 标头，websocket 的目的地与原始主机相同。

【讨论】：

嗨@sungyong，你能解释一下怎么做吗？我有几乎同样的问题。我正在使用 React.js 应用程序（端口 8000）+ node/express/socket.io 服务器（端口 8001），使用我的个人子域和专用 SSL 在 ngrok 上隧道 8000。客户端应用程序已提供但 socket.io 没有通过：无法在 iPhone 或 iPad（Safari 或 Chrome）上测试服务器端与客户端之间的交互。甚至 Safari 也不接受我机器上本地的 socket.io（通过带有 ssl 的 https ngrok）:(