我是否必须使用 ngrok 公开前端和后端以使 MERN 堆栈使 CRUD 操作正常工作?

Do I have to expose front and back ends with ngrok for MERN stack for CRUD ops to work?

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

前端开启localhost:3000

后端开启localhost:3003

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

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

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

ngrok start 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 用于远程原型时都在前端编辑 CRUD 行?

我在这里错过了什么?

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

要解决 url 切换问题:

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

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

它是如何工作的,你会在你的反应应用程序的根文件夹中创建一个 .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