时间戳

首页 > 解决方案 > React 客户端未通过 ngrok 连接到 Socket.io 服务器

node.js - React 客户端未通过 ngrok 连接到 Socket.io 服务器

问题描述

我正在尝试让 socket.io 服务器与 React 客户端（使用 create-react-app 制作）进行交互，遵循此处找到的相对较新的教程。

以下是来源： https ://codesandbox.io/s/keen-ganguly-bu2gp?file=/socket-io-server/app.js

在node app.js（端口 8001 上的服务器端）和npm start（3000 上的客户端）之后，客户端应用程序在连接到 http://localhost:3000/ 时正确更新（带有滴答时钟）

现在我正在尝试在我的手机/平板电脑上测试这个应用程序，但也与国外的朋友（我在法国，他们在美国和中国）使用'ngrok http 3000'

它确实在本地使用 ngrok 地址但仅在 Chrome 上工作。在 Safari 中，我在循环中收到这些错误（以 setInterval 速率）：

Not allowed to request resource

XMLHttpRequest cannot load http://127.0.0.1:8001/socket.io/?EIO=4&transport=polling&t=NdmftOr due to access control checks.

[blocked] The page at https://blablabla.ngrok.io/ was not allowed to display insecure content from http://127.0.0.1:8001/socket.io/?EIO=4&transport=polling&t=NdmgKiw.

在 iPhone / iPad 上以及与我在国外的朋友一起，测试什么都没有显示，只有“It's”位没有更新日期。

我不知道我的设置出了什么问题，尽管我记得我去年确实设法让它工作。我到处寻找有关 cors 的新规范，甚至“*”这次也没有这样做。

（我应该提到的最后一件事，也许是一个细节，但以防万一：今年夏天我在农村工作，没有“固定电话”连接，所以我只有 iPhone 的个人热点可以使用。我对此表示怀疑，但这可能是有关的...？）

[编辑] ------------@sideshowbarker 编辑我的标签后，我意识到这可能与 cors 无关。我发现了另一个主题，也由@sideshowbarker 解决，这让我相信它与 SSL 有关。:) 我需要弄清楚我是否可以将我的网站的 SSL 证书与 Ngrok Pro 计划相关联，如果它是解决方案，我会更新帖子......

[编辑 2]

好的，所以我找不到解决此问题的答案，只有一种解决方法：

  1. 将 ngrok 隧道连接到我个人网站的子域

  2. 为该子域安装额外的 SSL 证书并以这种方式运行 ngrok：

    ngrok tls -region eu -hostname sub.domain.com -key '/path/my.key' -crt '/path/crt' 8000

  3. 此时socket.io仍然没有工作，所以我很绝望。两天后我在这里找到了解决方法：想法如下，而不是在两个不同的端口上运行服务器（socket.io）和 React 客户端，而是通过运行单个命令在同一个端口上运行它们。这样 Safari 不会引起任何问题，套接字消息只会通过 ngrok 发送到我的智能手机和朋友:)

标签： node.jsreactjssocket.iongrokmixed-content

解决方案

推荐阅读