主机和端口在 http.get 请求中重复

Question

我有一些 Angular 代码正在尝试使用使用 Express 路由器在本地设置的网络 API。路由器监听 http://localhost:5000/api/products。我可以验证此 URL 是否正确，因为我可以使用 Postman 进行测试并得到正确的结果。现在，当我尝试在 Angular 服务中使用相同的 URL 时：

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);
}

问题似乎出在行 return this.http.get<Product[]>(url).pipe( 上。我已经验证 URL 是预期的 http://localhost:5000/api/products。但是，我在错误处理程序中收到 404 指示 http://localhost:4200/localhost:5000/api/products 未找到。为什么 'localhost:4200' 被添加到 URL？我该如何预防？

Answer 1

仔细一看，原来是错别字。

主机和端口在 http.get 请求中重复

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

angular

angular-httpclient