'How do I use proxy.conf.json to proxy httpclient get requests?

I am trying to use Angular's HTTPClient to go from my localhost on http to a url: https://openlibrary.org/subjects/all.json?details=true

and https://openlibrary.org/subjects/${subject}.json

I was previously being blocked by CORS. I saw talk of proxy.conf.json being useful to go around this.

Here is my proxy.conf.json:

{
    "/api": {
        "target": "https://openlibrary.org",
        "secure": false
    }
}

And I am doing HTTP get requests with this code:

import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";

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

  constructor(private http: HttpClient) {}

  getSubjects() {
    return this.http.get("/api/subjects/all.json?details=true");
  }

  getBooksForThisSubject(subject: string) {
    return this.http.get(`/api/subjects/${subject}.json`);
  }
}

This gives me:

HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: 'Not Found', url: 'http://localhost:4200/api/subjects/all.json?details=true', ok: false, …}
error: "<html>\r\n<head><title>404 Not Found</title></head>\r\n<body>\r\n<center><h1>404 Not Found</h1></center>\r\n<hr><center>nginx/1.18.0 (Ubuntu)</center>\r\n</body>\r\n</html>\r\n<!-- a padding to disable MSIE and Chrome friendly error page -->\r\n<!-- a padding to disable MSIE and Chrome friendly error page -->\r\n<!-- a padding to disable MSIE and Chrome friendly error page -->\r\n<!-- a padding to disable MSIE and Chrome friendly error page -->\r\n<!-- a padding to disable MSIE and Chrome friendly error page -->\r\n<!-- a padding to disable MSIE and Chrome friendly error page -->\r\n"
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure response for http://localhost:4200/api/subjects/all.json?details=true: 404 Not Found"
name: "HttpErrorResponse"
ok: false
status: 404
statusText: "Not Found"
url: "http://localhost:4200/api/subjects/all.json?details=true"

But I don't want to go to localhost:4200, I'm telling it to go to "target": "https://openlibrary.org", and it still goes to localhost:4200

Why is it like this? What do I do to fix it?

Please note that I've already spent about an hour trying various approaches. I cannot deduce how I am meant to do this to proxy from my http localhost to https for openlibrary. Thanks in advance

edit: Using MikeOne's suggestion I now get

HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: 'Not Found', url: 'http://localhost:4200/subjects/all.json?details=true', ok: false, …}

so its still going to Localhost

angular

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How do I use proxy.conf.json to proxy httpclient get requests?

Sources

Related Questions