How to configure a proxy in Angular CLI

Erik Nijland Source

I created a new @angular/cli project and added one http GET call in the root component. Without using a proxy this works fine.

export class AppComponent implements OnInit {
  constructor(private http: Http) {}

  ngOnInit() {
      .map(response => response.json())
      .subscribe(data => console.log(data));

When I try to add the configure as describe in the Angular CLI wiki things go wrong.

My proxy.conf.json file:

  "/api": {
    "target": "",
    "secure": false

I changed the URL in the component to /api/breeds/list/all. And I ran ng serve --proxy-config proxy.conf.json

Then I'm gertting Internal Server Error message in my browsers console. And in the terminal where I started ng serve I'm getting this message [HPM] Error occurred while trying to proxy request /api/breeds/list/all from localhost:4200 to (EPROTO) (

I have tried several other configuration options and multiple API's. Results are similar.

The complete code is available on GitHub:

Versions used:

  • @angular/cli: 1.3.0
  • NodeJS: v8.1.4

Note: I understand that @angular/cli is using Webpack. Which in turn is using http-proxy-middleware.



answered 1 year ago Mauricio De La Quintana #1

I think it is happening because of the origin your are asking https form http. This can be solved using a flag in your proxy.

    "/api": {
    "target": "",
    "secure": false,
    "changeOrigin": true

comments powered by Disqus