How to configure a proxy in Angular CLI

Question

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() {
    this.http
      .get('https://dog.ceo/api/breeds/list/all')
      .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": "https://dog.ceo",
    "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 https://dog.ceo (EPROTO) (https://nodejs.org/api/errors.html#errors_common_system_errors)

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

The complete code is available on GitHub: https://github.com/ErikNijland/angular-cli-proxy-test

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.

EPROTO smells like a protocol issue. Perhaps because you're requesting via https but have secure set to false? Somewhere there must be a mismatch between protocols. — jackarms
– jackarms, Commented Aug 15, 2017 at 19:33

Mohammed Safeer · Accepted Answer · 2022-06-15 10:14:04Z

8

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

{
    "/api": {
    "target": "https://dog.ceo",
    "secure": false,
    "changeOrigin": true
    }
}

edited Jun 15, 2022 at 10:14

Mohammed Safeer

21.6k8 gold badges79 silver badges81 bronze badges

answered Aug 15, 2017 at 21:27

Mauricio De La Quintana

2,44220 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Erik Nijland Over a year ago

Thank you! It's working now. I always though that origin was just the host. Apparently it's scheme+host+port...

Ahsan · Accepted Answer · 2024-02-20 21:31:42Z

0

For me, the following worked:

In my proxy.conf.json

{
  "/api": {
    "target": {
        "host": "dog.ceo",
        "protocol": "https:",
        "port": 443
      },
    "secure": false,
    "changeOrigin": true,
    "logLevel": "info"
  }
}

Start angular with the proxy conf

ng serve --proxy-config proxy.conf.json

answered Feb 20, 2024 at 21:31

Ahsan

4,1622 gold badges40 silver badges37 bronze badges

Collectives™ on Stack Overflow

How to configure a proxy in Angular CLI

2 Answers 2

1 Comment

In my proxy.conf.json

Start angular with the proxy conf

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

In my proxy.conf.json

Start angular with the proxy conf

Comments

Your Answer

Sign up or log in

Post as a guest

Related