Angular Universal NodeJS production url works, localhost api gives error "Http failure response"

Question

I have an Angular 14 application with Universal.

The app is running server side on nodejs. My app is fetching api data to fill the html page since I need that for SEO purposes.

When my app is running locally with npm run dev:ssr and my api urls are to production, it all seem to work, I can see my api data in my page source.

But when I run my app with the localhost url for my api, it gives me an error in the terminal foreach api call:

ERROR HttpErrorResponse {
  headers: HttpHeaders {
    normalizedNames: Map(0) {},
    lazyUpdate: null,
    headers: Map(0) {}
  },
  status: 0,
  statusText: 'Unknown Error',
  url: 'https://localhost:7111/api/home/products/popular?language=nl',
  ok: false,
  name: 'HttpErrorResponse',
  message: 'Http failure response for https://localhost:7111/api/home/products/popular?language=nl: 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
  }

The backend is a .net core 6 api with CORS disabled:

builder.Services.AddCors(p => p.AddPolicy("cors", builder =>
{
    builder
    .WithOrigins("*")
    .AllowAnyMethod()
    .AllowAnyHeader();
}));

My nodejs is running: Node Express server listening on http://localhost:4001 My angular app is running on http://localhost:4200/

My server.ts is nothing special, I only redirect www to non-www and http to https but those api calls are done on the angular side and should not trigger the server.ts file if I read correctly.

Can someone help me, this is driving me crazy?

Thanks a lot!

Answer 1

As suggested by @Schippert adding below link to your main.server.ts will fix this issue:

process.env['NODE_TLS_REJECT_UNAUTHORIZED'] = '0';