🐞 `ERROR HttpErrorResponse` with the proxy + `ssr-dev-server` + SSL

[Yberion]

🐞 Bug report

What modules are related to this issue?

• builders (ssr-dev-server)
• common
• express-engine

Is this a regression?

No idea.

Description

When using the proxy (proxy.conf.js + "proxyConfig": "proxy.conf.js") with @nguniversal/builders:ssr-dev-server and ssl enabled (ssl + cert + key), it seems that I cannot take advantage of the proxy when rendering the page on the server.

Works fine without SSL.

I'm getting an error when trying to access https://localhost:4200/ because of the call to the API that require the proxy to work.

With ng serve everything works perfectly even with SSL.

Maybe there's something I'm missing or don't understand.

🔬 Minimal Reproduction

On the HomeComponent, I'm making 2 requests to the same API, the first one directly calling the real full url, the second request that need the proxy to "redirect" the call (this one fail with SSR + SSL).

There's an API interceptor to rewrite the url in Platform Server. (src\app\core\interceptors\api.interceptor.ts)

• Clone this repo: https://github.com/Yberion/Angular-SSR-Common-Engine
• Switch to branche feature/ssr-dev-ssl
• npm i
• npm run start:ssr:fastify:development or npm run start:ssr:express:development
  • SSL is enabled on the branche

You can disable SSL on serve-ssr-express / serve-ssr-fastify and test that it works.

The strange part is that if I directly call https://localhost:4200/api/chuck-norris/jokes/random it works fine (but then It's not calling the render function, so there's something with that).

🔥 Exception or Error

ERROR HttpErrorResponse {
  headers: HttpHeaders {
    normalizedNames: Map(0) {},
    lazyUpdate: null,
    headers: Map(0) {}
  },
  status: 0,
  statusText: 'Unknown Error',
  url: 'https://localhost:4200/api/chuck-norris/jokes/random',
  ok: false,
  name: 'HttpErrorResponse',
  message: 'Http failure response for https://localhost:4200/api/chuck-norris/jokes/random: 0 Unknown Error',
  error: ProgressEvent {
    type: 'error',
    target: XMLHttpRequest {
      onloadstart: null,
      onprogress: null,
      onabort: null,
      onerror: null,
      onload: null,
      ontimeout: null,
      onloadend: null,
      _listeners: [Object],
      onreadystatechange: null,
      _anonymous: undefined,
      readyState: 4,
      response: null,
      responseText: '',
      responseType: 'text',
      responseURL: '',
      status: 0,
      statusText: '',
      timeout: 0,
      upload: [XMLHttpRequestUpload],
      _method: 'GET',
      _url: [Url],
      _sync: false,
      _headers: [Object],
      _loweredHeaders: [Object],
      _mimeOverride: null,
      _request: null,
      _response: null,
      _responseParts: null,
      _responseHeaders: null,
      _aborting: null,
      _error: null,
      _loadedBytes: 0,
      _totalBytes: 0,
      _lengthComputable: false
    },
    currentTarget: XMLHttpRequest {
      onloadstart: null,
      onprogress: null,
      onabort: null,
      onerror: null,
      onload: null,
      ontimeout: null,
      onloadend: null,
      _listeners: [Object],
      onreadystatechange: null,
      _anonymous: undefined,
      readyState: 4,
      response: null,
      responseText: '',
      responseType: 'text',
      responseURL: '',
      status: 0,
      statusText: '',
      timeout: 0,
      upload: [XMLHttpRequestUpload],
      _method: 'GET',
      _url: [Url],
      _sync: false,
      _headers: [Object],
      _loweredHeaders: [Object],
      _mimeOverride: null,
      _request: null,
      _response: null,
      _responseParts: null,
      _responseHeaders: null,
      _aborting: null,
      _error: null,
      _loadedBytes: 0,
      _totalBytes: 0,
      _lengthComputable: false
    },
    lengthComputable: false,
    loaded: 0,
    total: 0
  }
}

🌍 Your Environment

(Also having the problem with Angular 14)

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 15.1.4
Node: 18.13.0
Package Manager: npm 9.2.0
OS: win32 x64

Angular: 15.1.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1501.4
@angular-devkit/build-angular   15.1.4
@angular-devkit/core            15.1.4
@angular-devkit/schematics      15.1.4
@angular/cli                    15.1.4
@nguniversal/builders           15.1.0
@nguniversal/common             15.1.0
@schematics/angular             15.1.4
rxjs                            7.8.0
typescript                      4.9.5

[alan-agius4]

This is working as expected. The proxy only effect requests coming from the browser.

[Yberion]

Hello @alan-agius4, the problem is that it works fine without SSL enabled (on SSR), even on the server side rendering.

If I'm following what you said, how are we able to test the SSR if the proxy only affect request from the browser ?

Saying it again, the problem only occur when we enable the SSL (on SSR).

[alan-agius4]

Let me take another look.

[NuriDurmus]

I think some NodeJS versions will work fine. I've the same issue but I also couldn't find any solution. NODE_TLS_REJECT_UNAUTHORIZED didn't work for me. My working nodejs version: 16.15.1

[docaohuynh]

I have got the same error angular ssr when request to localhost