在 React 应用程序中获取域

Question

如何以某种方式托管 React 应用程序，它使用 husk HTML 的域，而不是像另一个答案中建议的那样在某些 config.js 中配置它（ )?

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

例如，可以有多个域，相同的 JavaScript 代码应该服务于这些域。

为什么普通的js代码这么简单，可以忽略domain，React有问题？

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

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

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

React 仅适用于 API。

Answer 1

Create-React-App 不关心域，因此不清楚为什么这会给您带来问题。我唯一能想到的是，您正在开发的应用程序是您以外的其他人开发的，而您决定它需要有所不同。

要确定域，您可以使用 window.location.origin 假设您没有在任何地方使用端口（它将包括 :<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 在评论中提到的，您应该能够使用相对 urls 并跳过整个配置过程。（假设你的 React 应用程序不在端口上运行并且你的页面中没有 <base ..> 标签）

例如，/api/getStuff 将被视为与上述代码 (`${config.baseUrl}/api/getStuff`)

相同的 url

在 React 应用程序中获取域

Getting domain in React application

javascript

web-hosting

reactjs