如何在前端反应中设置后端 URL

Question

我是 React 的初学者（以及一般的前端）。我刚刚在 Java 上做了一个完整的 API，我想问你们，在 React 的 .jsx 上告诉 fetch() 函数的正确内容是什么后端 URL，我目前将它烧毁在一个常量上，但我认为必须存在一种更优雅的方式来做到这一点。

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

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

在后端，我有一个这样的restfull服务：

@CrossOrigin(origins = "http://localhost:3000")

@RequestMapping("/recursosTotales")

public List<Recurso> recursosTotales(){

    ConectorBd conectorBd =new ConectorBd();

    conectorBd.start();

    return  conectorBd.recursoList();

}

在前面，我有一个 fetch 调用像这样的 restfull 服务：

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的&nbsp;window.location

Answer 2

就我个人而言，我希望它是一个可配置的值，以便我可以在捆绑和部署后轻松更改它。除非 URL 是一个域名，您可以通过其他一些配置（即 apache）更改它被重定向到的位置，否则如果您更改后端服务器的地址，则必须对代码进行更改，这可能更多比更改配置更耗时。这是假设您信任可能有权访问此配置文件的每个人。