The host and port are duplicated in an http.get request

Question

I have some Angular code that is trying to use a web API set up locally using the Express router. The router listens to http://localhost:5000/api/products. I can verify that this URL is correct as I can test using Postman and I get the correct results. Now when I try to using this same URL in an Angular service like:

public ProductList(): Observable<Product[]> {
    const url = `${this.env.apiBase}/api/products/`;
    return this.http.get<Product[]>(url).pipe(
        tap((data) => console.log(`Product List: ${data.length}`)),
        catchError(this.handleError)
    );
}
private handleError(err: HttpErrorResponse): ObservableInput<any> {
    let errorMessage = '';
    if (err.error instanceof ErrorEvent) {
        errorMessage = `An error occurred: ${err.error.message}`;
    } else {
        errorMessage = `Server returned code ${err.status}, error message is ${err.message}`;
    }
    console.error(errorMessage);
    return throwError(errorMessage);
}

The problem seems to be with the line return this.http.get<Product[]>(url).pipe(. I have verified that the URL is http://localhost:5000/api/products as expected. But, I get a 404 in the error handler indicating http://localhost:4200/localhost:5000/api/products is not found. Why is the 'localhost:4200' getting added to the URL? How can I prevent it?

I'd guess because you didn't include e.g. the protocol in the base URL, so it's treated as relative. — jonrsharpe, Oct 26 '19 at 10:37

score 0 · Accepted Answer · answered Oct 27 '19 at 14:26

0

Looking at it closer it turned out to be a typo.

answered Oct 27 '19 at 14:26

Kevin Burton

2,032
4
26
43

The host and port are duplicated in an http.get request

1 Answers1