universal: SSR not working with HTTPS API URL

It worked for me after I added this line to my server.ts file “process.env.NODE_TLS_REJECT_UNAUTHORIZED = ‘0’;”

Hi all. I found the problem for me. On my server I setup port forwarding by iptables iptables --table nat --append PREROUTING --protocol tcp --dport 443 --jump REDIRECT --to-ports 3000

That is, my web server is running on port 3000. I did not take this into account when copying the UniversalInterceptor code from the official documentation

Now I fixed it and SSR works correctly. My universal-interceptor.ts

import { Request } from 'express';
import { REQUEST } from '@nguniversal/express-engine/tokens';
import { Inject, Injectable, Optional } from '@angular/core';
import { HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';

@Injectable()
export class UniversalInterceptor implements HttpInterceptor {

    constructor(
        @Optional() @Inject(REQUEST) protected request: Request,
        @Optional() @Inject('REQUEST') protected origin_request: any
    ) {}

    intercept(req: HttpRequest<any>, next: HttpHandler) {
        let serverReq: HttpRequest<any> = req;

        if (this.request) {
            let host = this.request.get('host');
            /**
             * Fix production SSR error
             */
            if (!host.includes(':')) {
                host += ':3000';
            }

            let newUrl = `${this.request.protocol}://${host}`;
            if (!req.url.startsWith('/')) {
                newUrl += '/';
            }

            serverReq = req.clone({
                url: newUrl + req.url,
                setHeaders: {
                    cookie: this.origin_request ? this.origin_request.headers.cookie : ''
                }
            });
        }

        return next.handle(serverReq);
    }
}

Hey all,

This was not working for me too, and after a week long struggle I have found the problem. The actual problem was with the environment.ts file. For some reason, when Angular runs on the server it refers to the environment.ts file, and on the client it refers to environment.prod.ts.

I had http://localhost:3000 reference in environment.ts file. It worked fine for me after updating this. Fingers crossed, I hope the same was the issue at your end. All the best!

Thanks, Roshan

Using http powered api SSR working perfectly. But can not figure out with SSR Https why its not working

Bellow are the screen shots It render on client side when i inspect in google chrome, But i do the view source code of it Can not see any meta tag rendering there.

Inspect in chrome

view source code in chrome

As you can see the Difference here the last to meta tag render on client side on inspect but are not there when i view source code when i use SSR Https, But using SSR Http every thing work fine.

Using https://angular.io/api/platform-browser/Meta

My code:

I also faced this problem and struggled with it for a couple of hours. Applying the process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0'; fix worked for me, but the downside is that you compromise your app’s security by exposing it to a man-in-the-middle attack.

Upon investigating further, I realized that the problem was not with Angular. I ran https.get('<my-api-url>') in a Node shell and I got: Uncaught Error: unable to verify the first certificate. Turns out, I had configured my API server with only the leaf certificate, not the full-chain certificate (leaf + CA bundle). Node apparently needs the full-chain certificate for verification, unlike browsers.

Upon installing the full-chain certificate on my server, the problem went away without any changes to the app codebase.

It worked for me after I added this line to my server.ts file “process.env.NODE_TLS_REJECT_UNAUTHORIZED = ‘0’;”

This worked for me… My Application Runs in Angualr V9

You will get below warning form node js console: (node:21308) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to ‘0’ makes TLS connections and HTTPS requests insecure by disabling certificate verification.

@bastienlemaitre you need to reproduce exception on a public repository.

@piyushpatil027 you need to reproduce exception on a public repository.

No problem with https: https://ssr.angular.su/back Try look:

• https://github.com/Angular-RU/angular-universal-starter

• https://github.com/Angular-RU/angular-universal-starter/blob/80f742c25bd7af96e86dcba5cec0f2480f803a99/src/app/transfer-back/transfer-back.component.ts#L21

@Toxicable I’m suffering from the same issue, and only noticed after launching a new site that it was broken. I’ve also checked previously working apps to find they are broken too. Not sure at what point this bug was introduced but it’s causing major issues.

@Baedonghee Sorry but there isn’t much we can do without a minimal reproduction of the issue. Are you able to put one together for us?

Unable to find solution: We tried installing ssl in server side rendering unable to resolve this issue. For now we are using http api url for meta information rendering.