如何在frontEnd中設置backURL 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庫，但是對於我讀到的過程，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並映射到訪存方法。 我認為這是一種反思方式。