node.js - 我是否必须使用 ngrok 来公开 MERN 堆栈的前端和后端才能使 CRUD 操作正常工作？

Question

我正在本地计算机上开发 MERN 应用程序。

前端位于 localhost:3000

后端位于 localhost:3003

我的前端代码中有一个请求，如下所示:

axios.get('localhost:3000/comments', params)

现在，我使用 ngrok 来公开应用程序，如下所示:

ngrok 启动 front_end back_end

我的 .yml 配置文件如下所示:

tunnels:
    front_end:
        proto: http
        addr: 3000
        subdomain: fakedomaintest
    back_end:
        proto: http
        addr: 3003
        subdomain: fakedomaintestback

我的问题是，我是否必须以不同的方式公开后端，或者我是否错误地分割了堆栈？

当我公开 localhost:3000 和 localhost:3003 时，我编辑前端代码中的 CRUD 行以匹配 ngrok URL，如下所示:

axios.get('fakedomaintestback.ngrok.io/comments', params)

访问后 fakedomaintest.ngrok.io 它有效......

但是有没有一种更简单的方法，让我不必每次想使用 ngrok 进行远程原型(prototype)时都在前端编辑 CRUD 行？

我在这里缺少什么？

Answer 1

如果您的应用程序在 localhost:3003 上运行，那么您的 axios 调用应该是 axios.get('localhost:3003/comments', params)

解决 url 切换问题:

您可以使用 dotenv 为您的应用程序设置环境变量。

https://www.npmjs.com/package/dotenv

它的工作原理是您在 React 应用程序的根文件夹中创建一个 .env 文件，其中包含以下内容:

BACKEND_HOST=localhost:3003

然后在您的代码中，您可以将所有网络调用更改为以下内容:

axios.get(`${process.env.BACKEND_HOST}/comments`, params)

当您想切换到使用 ngrok 时，只需更改 .env 文件中的值即可。

如果您碰巧使用 Create React App，则已经支持 .env 文件，但您必须在所有变量前添加 REACT_APP 前缀，因此 BACKEND_HOST 将变为 REACT_APP_BACKEND_HOST