在React JS中存储API根Url的最佳位置是什么

Question

我正在处理的项目中使用mern堆栈。

目前我正在向rest api发出这样的请求。

const { data } = await axios.get('http://localhost:5000/api/testimonials/');

API在http://localhost:5000/上可用

但当我部署这个应用程序时，url会改变。

使用当前的方法，我已经用liveurl替换了http://localhost:5000/。

与其这样做，我想将根url存储在一个变量中。

在React JS中存储API根的最佳位置是什么？

所以我可以在每次请求中使用它，当我必须更新url时，我只需要更新那个变量。

Answer 1

你可以做两件事，

1. 通过为每个环境创建.env文件将它们存储在env变量中

   CRA-.env

   别忘了在你的名字前面加REACT_APP_，否则就不起作用了

2. 在package.json中使用proxy。(这是在文档中使用api的首选方式)

   它避免了文档中提到的cors错误

   CRA-代理

Answer 2

您必须使用.env文件来保存根url.env应位于根目录中。

.env文件内容：

rooturl=http://yourproductiondomain.com

你可以在你的代码上使用过程：

const rooturl = process.env.rooturl || 'http://localhost:5000'; // for lcoalhost.. **.env** file does not work on localhost.
const { data } = await axios.get(rooturl + '/api/testimonials/');