如何在前端react中设置后端URL

Question

我是 React（以及一般前端）的初学者。我刚刚在 Java 上制作了一个完整的 API，我想问你们，告诉 React 的 .jsx 上的 fetch() 函数的正确内容是什么后端 URL，我目前将其刻录在常量上，但我认为必须存在一种更优雅的方法来执行此操作。

感谢您的帮助，祝您编码愉快。

编辑：为了澄清我的意思，这是我拥有的一些示例代码：

在后端我有一个像这样的安静服务：

@CrossOrigin(origins = "http://localhost:3000")
@RequestMapping("/recursosTotales")
public List<Recurso> recursosTotales(){

    ConectorBd conectorBd =new ConectorBd();
    conectorBd.start();
    return  conectorBd.recursoList();
}

在前面，我有一个调用 Restfull 服务的 fetch，如下所示：

fetch("http://localhost:8090/recursosTotales")
  .then(response => response.json())
  .then(response => {
    this.setState({ products: response });
  });

正如你们所看到的，后端的 URL 被烧毁了，我想知道的是如何创建某种全局变量，以防万一我必须更改服务器 URL，只需在一个地方更改它。

我尝试使用 dotenv 库，但据我所知，process.env 不适用于 .jsx 文件，因为它们是应用程序客户端的一部分，而 env 仅适用于服务器端。我无法完全理解这个原理。

无论如何，我希望我的问题更清楚。感谢所有已经回答的人。

编辑2

好吧，大家，我终于学会了如何正确使用 dotenv，它解决了我的要求，感谢大家的帮助和时间。

Answer 1

如果您的前端和后端主机名相同，请使用window.location.hostname.

这是 stackoverflow 的window.location