与 React 和 Express 通信，而无需使用 localhost 从另一台机器查看

Question

我有一个应用程序在从本地机器/虚拟机查看应用程序时运行良好，但是如果我在虚拟机中启动应用程序并尝试使用 {vm-IP：PORT} 访问应用程序，Express 和 React 无法相互通信。

React 如何沟通 -

const api = axios.create({
baseURL: "http://localhost:5000"
})

快递如何沟通 -

router.use(cors({
origin: 'http://localhost:3000'
}))

我必须将机器的 IP 地址硬编码到代码中才能让它们正确通信(用 ip 替换 localhost)，但这也意味着每次在不同的机器上运行应用程序时都必须对其进行编辑。

此问题有解决方法吗？该应用程序也是dockerized的，所以我不介意能够在docker-compose中粘贴IP地址，以便React和Express可以通信，但我不确定这是否可能。

Answer 1

您可以使用 ngrok 解决此问题。 请参阅此文档：https://ngrok.com/docs

基本上，ngrok 所做的是，它将允许您在互联网上为您的端口提供服务，而无需实际托管它。 它非常易于使用。首先将 ngrok 安装到您的系统中，然后在您的终端中运行ngrok http 5000命令，以在互联网上服务器您的快速端口 5000。 ngrok 将允许您在 ngrok URL 被停用后在互联网上提供 8 小时的端口服务。 运行上面的命令会给你一个 url，你可以在你的反应应用程序中按如下方式使用

const api = axios.create({
baseURL: <<url_generated_by_ngrok>>
})

Answer 2

根据文档

app.use(cors({origin: true}));

将接受每个源并设置相应的Access-Control-Allow-Origin标头。这比设置Access-Control-Allow-Origin: *更好，当涉及凭据时，浏览器不接受。

如果接受每个源过于宽泛，您也可以在函数中实现规则并使用

app.use(cors({origin: myOriginFunction}));