Angular-CLI proxy to backend doesn't work

Question

https://github.com/angular/angular-cli#proxy-to-backend here is an instruction how to do proxying to backend. I did everything step by step and still requests aren't proxied.

8080 - my Express backend 4200 - my Angular2 frontend

In Angular2 project I have file proxy.conf.json with content like this:

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

In Angular2 package.json I changed start procedure to "start": "ng serve --proxy-config proxy.conf.json"

When I type inside commander npm start then at the start I can see Proxy created: /api -> http://localhost:8080. Well, so far is good I guess.

I'm trying to send a request (Angular2)

  constructor(private http: Http) {
    this.getAnswer();
  }

  getAnswer(): any {
    return this.http.get("/api/hello")
      .subscribe(response => {
        console.log(response);
      })
  }

I'm getting an error that http://localhost:4200/api/hello 404 (Not Found). As we can see, nothing has been proxied. Why? Did I do something wrong?

To be clear. When I go manually to http://localhost:8080/hello, all works fine. There is nothing to look for in backend side.

one thing i want to know, ur working url is localhost:8080/hello, then why r u pointing it to localhost:8080/api/hello ? have u bypassed it to your express server? — Manish
– Manish, Commented Oct 1, 2016 at 17:17
Inside proxy.cons.json I set localhost:8080 as /api, so when I'm pointing to /api/hello, that suppose to mean I'm pointing to localhost:8080/hello I guess. — elzoy
– elzoy, Commented Oct 1, 2016 at 18:55
New document link: github.com/angular/angular-cli/wiki/stories-proxy. — hlovdal
– hlovdal, Commented Oct 27, 2017 at 21:32
I know it's weird but angular proxy path is case sensitive. So defining "api" or "Api" are different in Angular proxy. — AmirHossein Rezaei
– AmirHossein Rezaei, Commented Apr 6, 2021 at 20:53

Manish · Accepted Answer · 2016-10-01 19:34:35Z

83

Could you try with this one:

{
  "/api": {
    "target": "http://url.com",
    "secure": false,
    "pathRewrite": {"^/api" : ""}
  }
}

It works for me,

** NG Live Development Server is running on http://localhost:4200. **
 10% building modules 3/3 modules 0 active[HPM] Proxy created: /api  ->  http://ec2-xx-xx-xx-xx.ap-south-1.compute.amazonaws.com
[HPM] Proxy rewrite rule created: "^/api" ~> ""

answered Oct 1, 2016 at 19:34

Manish

2,19018 silver badges18 bronze badges

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

7 Comments

Yuri Over a year ago

Thanks for showing the pathRewrite placement. @elzoy: The URL is rewritten according to the regex. More info on the Webpack's Http-Proxy-Middleware: github.com/chimurai/http-proxy-middleware#options

DanzerZoneJS Over a year ago

i have used the above configuration..nut it still doesn't work. It shows that proxy has been set but when i make request it actually hits localhost:4200/api

user2347528 Over a year ago

Worked for me in development. How do I publish this to production?

OzzyTheGiant Over a year ago

@user2347528, this is not for production, this is for development purposes only. When you run ng build, you should get a small bundle with the main html file that you should be serving from your back end to display the application. Either that or you will have to set up a reverse proxy server with apache or nginx if the front end of the app will be kept separate from the back end.

Akshay Over a year ago

If you are using an external host instead of localhost, modify target something like: "target": { "host": "url.com", "protocol": "http:", "port": 80 }, or for secured version: just change protocol to "https:", and port to 443. Also notice there's a ':' (colon) at the end of protocol name. Also add "changeOrigin": true to your configuration.

|

Tony Scialo · Accepted Answer · 2017-02-16 01:55:13Z

29

This was close to working for me. Also had to add

"changeOrigin": true,

full proxy.conf.json shown below:

{
  "/proxy/*": {
  "target": "https://url.com",
  "secure": false,
  "changeOrigin": true,
  "logLevel": "debug",
  "pathRewrite": {"^/proxy" : ""}
  }
}

answered Feb 16, 2017 at 1:55

Tony Scialo

6,02713 gold badges39 silver badges57 bronze badges

2 Comments

Sadok Mtir Over a year ago

Same for me, it worked after adding "changeOrigin": true, Here is my config: { "/api": { "target": "https://url.com, "secure": true, "changeOrigin": true }}

Scott Byers Over a year ago

Same - "changeOrigin" made the difference since I was trying to consume a 3rd party remote API. Otherwise the proxy config is identical.

Mohammad Faisal · Accepted Answer · 2023-04-13 11:26:38Z

15

Please follow below steps

In Angular project create a file called proxy.conf.json with content like this:

 {
     "/api/*": {
       "target": "http://127.0.0.1:8080",
       "secure": false,
       "logLevel": "debug",
       "changeOrigin": true
     }
   }

edit package.json file and add below code in scripts section:

{
  "scripts": {
    "start": "ng serve --proxy-config proxy.conf.json"
  }
}

call your backend api like this

this.http.get('/api/v1/people')
    0.map(res => res.json());

run npm start or ng serve --proxy-config proxy.conf.json

edited Apr 13, 2023 at 11:26

Mohammad Faisal

5,95915 gold badges74 silver badges124 bronze badges

answered Feb 13, 2019 at 10:08

vipinlalrv

3,0751 gold badge17 silver badges9 bronze badges

2 Comments

M-sAnNan Over a year ago

proxy.conf.json not proxy.cons.json :) btw this was the issue with ng serve. It was some how not picking up the setting

ZINE Mahmoud Over a year ago

working good with ng serve , but not working on prod mode (i use appache server with xamp) any idea ?

Srikkant Srinivasan · Accepted Answer · 2017-04-27 16:56:38Z

11

I had to make a small adjustment based on the above answers, although it seems a bit odd looking at the config now.

This is my proxy.conf.json shown below:

{
  "/api/*": {
     "target": "https://url.com",
     "secure": false,
     "changeOrigin": true,
     "logLevel": "debug",
     "pathRewrite": {"^/api" : "http://url.com/api"}
  }
}

Basically, I rewrote the path completely. And it works now.

answered Apr 27, 2017 at 16:56

Srikkant Srinivasan

7989 silver badges19 bronze badges

14 Comments

JDev Over a year ago

Hi, I have the same problem, but your method does not work. Maybe you have any ideas? stackoverflow.com/questions/44872498/… Thanks

Srikkant Srinivasan Over a year ago

I checked your other question - have one doubt - why is the pathrewrite like this? "^/profile": "" Shouldn't you have a destination/result path?

JDev Over a year ago

Thanks a lot! { "/profile/*": { "target": "localhost:8888", "secure": false, "pathRewrite": { "^/profile": "localhost:8888/profile" }, "changeOrigin": true, "logLevel": "debug" } }

JDev Over a year ago

This is very strange, after restarting the idea again does not work. Cleaned the entire cache. ((((((

Srikkant Srinivasan Over a year ago

Can you paste the code snippet of yours here? Or is it the same as the one in your previous comment?

|

SoEzPz · Accepted Answer · 2017-11-01 19:31:03Z

5

On MAC this works for me

Angular 4 running localhost: http://localhost:4200/

In package.json

"start": "ng serve --proxy-config proxy.config.json",

In proxy.config.json

Where our-company-server would be replaced by off-site URL

{
  "/v1": {
    "target": "https://our-company-server.com:7002",
    "secure": false,
    "logLevel": "debug"
  }
}

Where an angular GET request would be...

this.http.get('/v1/dashboard/client', options).map...

// options are headers, params, etc...
// then .map the observable in this case.

answered Nov 1, 2017 at 19:31

SoEzPz

16k8 gold badges64 silver badges67 bronze badges

Comments

Mahesh · Accepted Answer · 2019-03-15 17:27:03Z

2

For those having a custom localhost domain, refer to this solution

{
  "/api/*": {
    "target": "http://backend.site.example",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": "http://backend.site.example/api"
    }
  }
}

answered Mar 15, 2019 at 17:27

Mahesh

4,0651 gold badge42 silver badges50 bronze badges

Comments

Sohail Ahmad · Accepted Answer · 2019-06-12 08:21:23Z

2

this work for me proxy.config.json file

{
"/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
    }
}

and add "ng serve --proxy-config proxy.config.json" in package.json and run command npm start

answered Jun 12, 2019 at 8:21

Sohail Ahmad

10.6k5 gold badges29 silver badges47 bronze badges

Comments

dimeros · Accepted Answer · 2021-04-18 18:26:46Z

2

I really don't know why but in angular 11, the only solution that worked for me was the following proxy.conf.json (without any other arguments):

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

Furthermore, in angular 11, you have the option to set in the angular.json the correct proxy configuration without setting it as argument to npm commnand:

...
"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "angular-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },
...

answered Apr 18, 2021 at 18:26

dimeros

1011 silver badge8 bronze badges

1 Comment

Kirill G. Over a year ago

Addition to angular.json is actually the necessary part.

fcdt · Accepted Answer · 2020-09-13 14:18:05Z

0

Try the following things, mostly it will be either of these:

Add the following:

"changeOrigin": true,
"pathRewrite": {"^/service" : ""}

Run

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

edited Sep 13, 2020 at 14:18

fcdt

2,5215 gold badges17 silver badges27 bronze badges

answered Sep 13, 2020 at 13:56

DineshRaja

1

Comments

Schaki · Accepted Answer · 2021-09-03 14:04:26Z

0

Not really an answer to the question, but make sure your backend is actually available where you expect it to be. In my case something made the node.js backend stop answering requests which I didn't notice at first and blamed the proxy.

answered Sep 3, 2021 at 14:04

Schaki

1,8011 gold badge14 silver badges14 bronze badges

Comments

Jacques · Accepted Answer · 2022-03-22 07:51:39Z

0

Proxy attribute pathRewrite should be added in the proxy.conf.json. See the example below.

{
  "/services/*": {
    "target": "http://yoururl.com",
    "secure": false,
    "changeOrigin" : true,
    "pathRewrite": {
      "^/services" : ""
    }
  }
}

and run ng serve --proxy-config proxy.conf.json Surely it will work.

edited Mar 22, 2022 at 7:51

Jacques

7,1758 gold badges47 silver badges106 bronze badges

answered Jun 4, 2020 at 4:53

Anthoni Lawrance Arokiyasamy

374 bronze badges

Collectives™ on Stack Overflow

Angular-CLI proxy to backend doesn't work

11 Answers 11

7 Comments

2 Comments

2 Comments

14 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

7 Comments

2 Comments

2 Comments

14 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related