从 Angular 5 Universal 获取域名始终返回 127.0.0.1

我在 Angular 5 应用程序的服务器端渲染方面遇到问题。我需要域来创建正确的链接（应用程序在不同的环境中使用，并且为每个端点创建几个包是个坏主意）。

所以我尝试使用堆栈中的选项，但我总是得到 127.0.0.1:4000 作为域/主机。我认为最好的选择应该是：

服务器.ts

app.engine('html', (_, options, callback) => {
    const engine = ngExpressEngine({
        bootstrap: AppServerModuleNgFactory,
        providers: [
            { provide: 'request', useFactory: () => options.req, deps: [] },
            provideModuleMap(LAZY_MODULE_MAP)
        ]
    });
    engine(_, options, callback);
});

在 app.component.ts 中：

   constructor(@Inject(PLATFORM_ID) private platformId,
                private injector: Injector) {

        if (isPlatformServer(this.platformId)) {
            let req = this.injector.get('request');
            console.log("host: " + req.get('host'));
        } else {
            console.log('we\'re rendering from the browser, there is no request object.');
        }
    }

我也检查对象option来自 NodeJS -> 它没有任何有关域的信息。host在那里定义为127.0.0.1:4000。我不知道如何从 NodeJS 获取它。你能帮忙或者给点小建议吗？

也许我的错是我的 Nginx 配置错误？

server {
    listen 80;
    listen [::]:80;
    listen 443 ssl;
    listen [::]:443 ssl;

    server_name mock.test.com;

    ssl_certificate /home/xxx/Projects/xsw/cert/certificate.chained.crt;
    ssl_certificate_key /home/xxx/Projects/xsw/cert/key.prv;

    root /home/xxx/Projects/xsw/;
    index index.html;

    location / {
        proxy_pass http://127.0.0.1:4202;
    }

}

今天我损失了大约 10 个小时，但最终我找到了解决方案。我的问题与 nginx 配置有关。

当我使用时：

location / {
    proxy_pass http://127.0.0.1:4000;
}

Nginx 将请求中的主机更改为 127.0.0.1:4000。因此，解决方案是将 nginx proxy 编辑为：

location / {
    proxy_pass http://127.0.0.1:4000;
    proxy_set_header Host example.com;
    proxy_set_header HTTPS on;
}

我没有更改我的 Express Node.js 服务器中的任何内容：

服务器.ts

app.engine('html', (_, options, callback) => {
    const engine = ngExpressEngine({
        bootstrap: AppServerModuleNgFactory,
        providers: [
            { provide: 'request', useFactory: () => options.req, deps: [] },
            provideModuleMap(LAZY_MODULE_MAP)
        ]
    });
    engine(_, options, callback);
});

在我的 app.component.ts 中，我使用以下配置：

   private domain: string;

   constructor(@Optional() @Inject(REQUEST) private request: any,
               @Inject(PLATFORM_ID) private platformId,
               private injector: Injector) {

        if (isPlatformServer(this.platformId)) {
            if (this.request.get('https')) {
                this.domain = 'https://' + this.request.get('host');
            } else {
                this.domain = 'http://' + this.request.get('host');
            }
        } else {
            this.domain = document.location.protocol + '//' + document.location.hostname;
        }
    }

为了创建这个答案，我使用了 StackOverflow 的另一个答案：https://stackoverflow.com/a/47434417/2972087以及 Nginx 文档的一部分：http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_set_header