reactjs - 在 SSR 期间获取主机名

Question

我正在编写一个应用程序，它在不同的域中有一个客户端和一个 api，如下所示:

[本地]

localhost:5000(客户端)

本地主机:5001 (API)

[网络]

app.domain.com(客户端)

api.domain.com (api)

现在，在编写获取请求时，我希望能够在从 localhost 客户端发出请求时将请求发送到 localhost api，并在从 web 客户端发出请求时将请求发送到 web api。为此，我必须能够设置我的基本 url，因此我尝试编写一个 getApiDomain 方法，我可以用它来选择正确的域。

let fetchTask = fetch(`${Domain.getApiDomain()}/api/Item/${id}`)...

我的方法是这样的:

export abstract class Domain {
    public static isLocalhost = Boolean(window.location.hostname === 'localhost' );

    public static getApiDomain(): string {

        return this.isLocalhost
            ? "http://localhost:5001"
            : "http://api.domain.com";
    }
}

这对客户端来说效果很好，但由于使用了 window，我无法在 SSR 期间让它在服务器上工作。在服务器上执行时如何获取主机名？

Answer 1

您可以做几件事，但最简单的是:

对于在请求之间不发生变化的事情，您可以使用 globals NodeJS 中的对象。因此，在服务器启动时，您可以检测您是否在本地主机上(可能带有 CLI 标志)并执行 global.settings.ApiDomain = <URL> .

然后在你的index.js你可以做的文件:

window.settings.ApiDomain = window.location.hostname === 'localhost' ? 
  "http://localhost:5001" : "http://api.domain.com"

然后每当你需要使用 ApiDomain 时，你可以这样做:

const apiDomain = window ? window.settings.ApiDomain : global.settings.ApiDomain