在 React 应用程序中获取域

Question

如何以某种方式托管 React 应用程序，它使用外壳 HTML 的域，而不是按照另一个答案中的建议在某些 config.js 中配置它（ Javascript / React 中的动态配置变量）？

React JS 托管在与应用程序 API 相同的域下。 假设每个应用程序始终使用根目录，而不是子目录，因此只有https://some.domain可以是 baseUrl。 React 的开发设置对 PROD 不感兴趣，可以单独设置。

例如，可以有多个域，应使用相同的 JavaScript 代码。

为什么普通的js代码这么简单，可能不懂领域，React有问题？

后端不是 Node.js，但即使后端从 HTTP 标头中获取它的域，所以必须配置 React 似乎很奇怪。

有什么比在后端有一些配置转发器更好的方法吗？

这个想法是 React 代码的存储没有任何可能的域列表，正如在任何地方都建议的那样。 目前需要为每个域单独构建，不方便，在描述的同域场景中应该避免。 可以将什么放入 src/config/index.js 以使其动态感知域？

React 仅适用于 API。

Answer 1

Create-React-App 不关心域，所以不清楚为什么会给你带来问题。 我能想到的唯一一件事是，除了你自己之外的其他人已经开发了你正在开发的应用程序，而你已经决定它需要有所不同。

要找出域，您可以使用window.location.origin假设您没有在任何地方使用端口（如果您在端口上运行 react ，它将包括:<port-number> ）。

如果涉及端口，您可以使用`${window.location.protocol}//${window.location.hostname}` 。 无论如何使用它可能更安全..

---

要在多个地方使用它，在一个地方检索它是有意义的，比如你提到的src/config/index.js （不是create-react-app的默认产品，如果你已经拥有其中之一这是因为以前的人创造了它）。

在那个文件中你可能有类似的东西

export default {
  baseUrl: `${window.location.protocol}//${window.location.hostname}`
};

然后在您的 API 调用之一中使用它，您可以执行以下操作：

import config from 'config/index.js'; // or whatever path to get to that file

...

const url = `${config.baseUrl}/api/getStuff`;
const response = await fetch(url);

...

---

正如评论中提到的@NickCox，您应该能够使用相对网址并跳过整个配置。 （假设您的反应应用程序没有在端口上运行并且您的页面中没有<base..>标记）

例如， /api/getStuff将被视为与上面代码中相同的 url ( `${config.baseUrl}/api/getStuff` )