无法连接到数据库，因为axios位于UI javascript文件中

我刚刚在Heroku上部署了一个天气API应用程序，整个UI工作正常——唯一的问题是我无法从数据库中获取数据。我正在将一个名为'data.js'的虚拟数据文件导入'index.js'文件，该文件为node.js，包含我的应用程序的服务器。我意识到问题在于我的“UI”javascript文件“script.js”，因为我在axios get调用中使用了“localhost:3000”。下面是我正在描述的一张照片

如何使我的UI javascript文件能够使用localhost:3000或process.env包含axios调用？

一些选项：

1） 如果浏览器应用程序和API由同一Web服务器承载，则可以使用API端点的绝对路径，而不是完整URL

2） 您可以检查浏览器应用程序（

window.location.origin

）的主机名，查看它是本地托管还是远程托管。根据结果，您可以将端点设置为Heroku上API的本地主机名或远程主机名

3） 您还可以为不同的环境实现特定的构建，以替换正确的值（在您的情况下，用于本地和生产）。例如，Webpack允许您将环境变量映射到源代码，在这种情况下，您可以在开发构建中使用localhost，在生产构建中使用远程主机名