search

angular / angular-cli

CLI tool for Angular
https://cli.angular.io
MIT License
26.76k stars 11.97k forks source link

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

Closed Yberion closed 8 months ago

Yberion commented 1 year ago

🐞 Bug report

What modules are related to this issue?

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)

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 commented 1 year ago

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

Yberion commented 1 year ago

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 commented 1 year ago

Let me take another look.

NuriDurmus commented 1 year ago

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 commented 11 months ago

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

SkyZeroZx commented 11 months ago

Same error when use certificated auto seft i solve use NODE_TLS_REJECT_UNAUTHORIZED set to 0. Addicionally also usage the previous , change my httpClient to fetch in Angular 17 , and fixed the error. But if usage by default httpClient throw error same error this post ? why ? not idea not show more information that unknown error

alan-agius4 commented 8 months ago

Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

angular-automatic-lock-bot[bot] commented 7 months ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.