如何使用 React 传递自定义服务器主机名？

Question

我希望能够在运行 React 应用程序时传递自定义服务器主机名，以便在需要获取数据时在 URL 中使用。服务器当前正在我的本地计算机上运行，因此当我使用 fetch().

我一直在使用“http://localhost:....”，效果非常好。但我希望能够传递要在 URL 中使用的自定义主机名（例如我的 IP 地址）（即 http://ipaddress:...）。

我尝试像这样启动我的应用程序：

serverhost=ipaddress npm start

然后在我的 package.json 文件中

"scripts" : {
   "start": "react-scripts start $serverhost"
}

在文件 start.js 中，我可以访问 process.env.serverhost，但我希望能够在浏览器中访问主机名以进行实际的提取调用。我不想在 package.json 文件或 .env 文件中的“config”中设置主机名，因为它必须能够更改（我的印象是这是不可能的）。我只想能够访问源文件中命令行中作为参数给出的服务器主机名。

（我在某处读到过关于做的事

REACT_APP_MY_VAR=test npm start

然后访问它作为

process.env.REACT_APP_MY_VAR

在源文件中，但是当我尝试获取（）时，我遇到了一堆解析URL失败的错误。）

我尝试使用 REACT_APP 变量，并且在获取时不再出现解析 URL 错误。

Answer 1

您可以为每个环境创建 .env 文件，然后进行设置

REACT_APP_API_ENDPOINT=http://localhost.whatever

例如.env.development

REACT_APP_API_ENDPOINT=http://localhost.whatever

.env.生产

REACT_APP_API_ENDPOINT=http://production.whatever

这里解释了环境变量的用法https://create-react-app.dev/docs/adding-custom-environment-variables/#what-other-env-files-can-be-used

最终，您可以将其添加到脚本中，例如

"scripts" : {
   "start": "REACT_APP_API_ENDPOINT=http://localhost.whatever npm/yarn start"
   "start-production": "REACT_APP_API_ENDPOINT=http://production.whatever npm/yarn start"
}

如果您根本不想使用上述方法，请将您的 ip 分配给某个变量并将其添加到命令中以运行您的应用程序

"scripts" : {
   "start": "REACT_APP_API_ENDPOINT=$(curl ifconfig.me) npm/yarn start"
   "start-other: "REACT_APP_API_ENDPOINT=$(echo MY_VAR_WITH_IP) npm/yarn start"
}

然后从

process.env.REACT_APP_API_ENDPOINT

访问您的网址

Answer 2

您可以在 index.html 中设置一个 base 标记，该标记将为您从此后的所有请求设置基础。

您可以通过读取

document.location

动态创建基本标签并映射您所需的路径。

请注意，所有相对路径都将从您的基本标签映射

一个例子是这样的

<base href="https://www.dog.ceo/" />

然后创建一个这样的请求

fetch('api/breeds/list/all')
  .then( response => response.json() )
  .then( ({message}) => console.log( message ) );

该通话的完整地址为

https://www.dog.ceo/api/breeds/list/all