HTTPClient returns an Unknown Error when on localhost, even when the url is accessible through the browser and CORS is enabled

I’m still having trouble with this.

I have a simple Angular-Express app that works fine on the cloud, but when running locally calls to the backend always throw errors. It seems that the request is not reaching the backend at all, despite the fact that I can put the URL into a browser and get a proper 200 response. Normally this would be a CORS issue, but CORS is activated so I can’t figure out the problem.

I have pared down the code as much as possible in an effort to simplify it but the issue keeps happening.

The error message is:

"Http failure response for localhost:8080/: 0 Unknown Error"

This is what I see in the network tab:

General
Request URL: localhost:8080/
Referrer Policy: strict-origin-when-cross-origin

Request Headers
Provisional headers are shown
Learn more
Accept: application/json, text/plain, */*
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: *
Content-Type: application/json
Ocp-Apim-Subscription-Key
Ocp-Apim-Trace: true
Referer: http://localhost:4200/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Here is the backend code (index.js)

const port = 8080;

const   express = require('express');
const   cors = require('cors');

const   app = express();
app.use(cors());

app.use('/', function (req, res, next) {
    console.log('Got request');
    res.status(200).send();
});

app.listen(port, () => console.log(`listening on port ${port}`));

And here is the frontend code:

import { Injectable } from '@angular/core';
import { HttpHeaders, HttpClient } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { environment } from '@env/environment';
const APIEndpoint = environment.APIEndpoint;
const SubscriptionKey = environment.subscriptionKey;

@Injectable({
  providedIn: 'root'
})
export class TagsService {

  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Ocp-Apim-Subscription-Key': `${SubscriptionKey}`,
      'Ocp-Apim-Trace': 'true',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Expose-Headers': '*'
    })
  }
  
  constructor(private httpClient: HttpClient) { }

  all():Observable<any> {
    return this.httpClient.get(`localhost:8080/`, this.httpOptions);
  }
}

There is no log on the server when the call is made from the app.
Note that while this is happening I can put localhost:8080/ in the browser and I get a proper 200 response as expected.

>Solution :

Your main problem is, that you forgot the protocol when requesting your server. Try it like so:

all():Observable<any> {
  return this.httpClient.get(`http://localhost:8080/`, this.httpOptions);
}

The second thing:

The Access-Control* headers have to be sent in the servers response (is done by the "cors" package in your server), not in the clients request. So sending these two headers in your angular app has no effect.