如何在frontEnd中设置backEnd URL做出反应

Question

我是反应的初学者（和前端一般）。我刚刚在Java上做了一个完整的API，我想问你们，什么是什么告诉反应的.jsx上的fetch（）函数后端URL，我目前已将它烧成常量，但我想这样做必须存在一种更优雅的方式。

感谢您的帮助，以及快乐的编码。

编辑：澄清我的意思这是我的一些示例代码：

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

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

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

在前面我有一个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

推荐的方法是通过环境变量进行设置。您可以为您的环境提供不同的.env文件，并将主机设置为可变

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables

或者，如果UI的主机与API的主机相同，则可以从window.location中选择主机

Answer 2

如果您的frontEnd和backEnd是相同的主机名，请使用window.location.hostname。

这是stackoverflow的window.location

Answer 3

就个人而言，我希望它是一个可配置的值，以便我可以在捆绑和部署后轻松更改它。除非URL是一个域名，您可以通过其他配置（即apache）将其重定向到的域名，如果您更改了后端服务器的地址，则必须对代码进行更改，这可能更多比改变配置耗时。

这假设您信任可能有权访问此配置文件的所有人。

Answer 4

您可以将API raml规范转换为Json格式以列出API格式。然后你读这个Json并映射到fetch方法。我认为这是一种反思方式。