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

【问题标题】：How to set backEnd URL in frontEnd react如何在前端反应中设置后端 URL
【发布时间】：2019-02-14 11:44:11
【问题描述】：

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

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

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

在后端我有一个这样的完整服务：

@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，它解决了我的需求，感谢大家的帮助和时间。

【问题讨论】：

不确定您的要求，您所拥有的一些代码可能会有所帮助
欢迎来到 SO。你能更详细地描述你的问题吗？例如。通过添加描述您的问题的代码、命令或屏幕截图。另请查看帮助中心，尤其是asking 和minimal examples。谢谢。
react: how to pass in URLs for REST APIs的可能重复

标签： javascript java reactjs npm

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

这是stackoverflow的window.location

【讨论】：