ReactJs 如何传递自定义服务器主机名？

Posted 2023-03-07

【中文标题】ReactJs 如何传递自定义服务器主机名？

【英文标题】：ReactJs How to pass custom server hostname?

【发布时间】：2019-01-05 00:21:33

【问题描述】：

我希望能够在运行我的 react 应用程序时传递一个自定义服务器主机名，以便在我需要获取数据时在 url 中使用。服务器当前正在我的本地计算机上运行，​​所以当我 fetch(url) 时，我一直在使用“http://localhost:....”，它运行良好。但我希望能够传递自定义主机名，例如我的 ip 地址，以便在 url 中使用（即http://ipaddress:..。）。

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

serverhost=ipaddress npm start

然后在我的 package.json 文件中

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

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

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

REACT_APP_MY_VAR=test npm start 

然后访问它

process.env.REACT_APP_MY_VAR

在 src 文件中，但是当我尝试 fetch(url) 时，我遇到了一堆解析 URL 错误的失败）

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

【问题讨论】：

创建一个<base> 标签，并发送与该基本网址相关的所有请求

【参考方案1】：

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

REACT_APP_API_ENDPOINT=http://localhost.whatever

例如 .env.development

REACT_APP_API_ENDPOINT=http://localhost.whatever

.env.production

REACT_APP_API_ENDPOINT=http://production.whatever

env 变量的使用在这里解释https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#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访问您的网址

【讨论】：

谢谢！我做了一些更简单但功能较少的版本并且它有效 - 我希望一旦我的应用程序离开开发阶段，这将不再是一个问题，因为我不必在我的本地计算机上运行服务器

【参考方案2】：

您可以在 index.html 中设置一个 base 标记，这将为您从那里开始的所有请求设置基础。

您可以通过读取document.location 并映射您所需的路径来动态创建基本标签。

请注意，所有相对路径都将从您的 baseTag 映射

一个例子是这样的

<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