Error calling Tyk APIs Catalogue in Custom Portal

I am trying to call the api/portal/catalogue endpoint. The following command returns the API catalogue fine:

curl -X GET \
http://tyk-dashboard.local:3000/api/portal/catalogue \
-H 'authorization: SOME_KEY' 

However, when I try from an Angular web front end in Chrome I get the following errors:

This is the request:

url: string = "http://tyk-dashboard.local:3000/api/portal/catalogue";

constructor(private http: HttpClient) {}

sendGetRequest() {
const httpOptions = {
  headers: new HttpHeaders({
    authorization: "SOME_KEY"
  })
};

 return this.http.get(this.url, httpOptions).subscribe(res => res);
}

I discovered the solution is to add a Webpack proxy config file

proxy.conf.js

const PROXY_CONFIG = [
{
context: ["/api"],
target: "http://tyk-dashboard.local:3000",
secure: false,
changeOrigin: true
}
];
module.exports = PROXY_CONFIG;

And to change the request url to:
url: string = "/api/portal/catalogue";

:eyes: