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 http://localhost:8080/hello, then why r u pointing it to http://localhost:8080/api/hello ? have u bypassed it to your express server? — Manish, Oct 01 '16 at 17:17
Inside proxy.cons.json I set http://localhost:8080 as /api, so when I'm pointing to /api/hello, that suppose to mean I'm pointing to http://localhost:8080/hello I guess. — elzoy, Oct 01 '16 at 18:55
New document link: https://github.com/angular/angular-cli/wiki/stories-proxy. — hlovdal, Oct 27 '17 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, Apr 06 '21 at 20:53

score 78 · Accepted Answer · answered Oct 01 '16 at 19:34

78

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 01 '16 at 19:34

Manish

2,092
16
18

4

Thanks for showing the `pathRewrite` placement. @elzoy: The URL is rewritten according to the regex. More info on the Webpack's Http-Proxy-Middleware: https://github.com/chimurai/http-proxy-middleware#options – Yuri Oct 19 '16 at 11:19
4

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 http://localhost:4200/api – DanzerZoneJS Feb 20 '17 at 07:04
Worked for me in development. How do I publish this to production? – user2347528 Sep 08 '17 at 20:43
3

@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. – OzzyTheGiant Oct 10 '18 at 16:02
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. – Akshay Jul 09 '20 at 12:26
this is not mentionned bu the official doc : https://angular.io/guide/build#proxying-to-a-backend-server – Mehdi Jul 16 '20 at 03:48
but what about for ng build...in ng serve it is working fine but on server it is not working. any solution for ng build? – Dinesh Gurjar Oct 20 '22 at 11:03

score 27 · Answer 2 · answered Feb 16 '17 at 01:55

27

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 '17 at 01:55

Tony Scialo

5,457
11
35
52

Same for me, it worked after adding `"changeOrigin": true,` Here is my config: `{ "/api": { "target": "https://url.com, "secure": true, "changeOrigin": true }}` – Sadok Mtir Sep 11 '17 at 16:13
1

Same - "changeOrigin" made the difference since I was trying to consume a 3rd party remote API. Otherwise the proxy config is identical. – Scott Byers Nov 14 '17 at 18:36

score 12 · Answer 3 · edited Apr 13 '23 at 11:26

12

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 '23 at 11:26

Mohammad Faisal

5,783
15
70
117

answered Feb 13 '19 at 10:08

vipinlalrv

2,975
1
14
9

**proxy.conf.json** not **proxy.cons.json** :) btw this was the issue with ng serve. It was some how not picking up the setting – M-sAnNan Sep 29 '20 at 12:22
working good with ng serve , but not working on prod mode (i use appache server with xamp) any idea ? – ZINE Mahmoud Jun 10 '22 at 15:16

score 11 · Answer 4 · answered Apr 27 '17 at 16:56

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 '17 at 16:56

Srikkant Srinivasan

808
9
19

Hi, I have the same problem, but your method does not work. Maybe you have any ideas? https://stackoverflow.com/questions/44872498/configure-angular-cli-proxy-for-custom-headers-in-request-to-backend Thanks – JDev Jul 02 '17 at 16:28
1

I checked your other question - have one doubt - why is the pathrewrite like this? `"^/profile": ""` Shouldn't you have a destination/result path? – Srikkant Srinivasan Jul 03 '17 at 15:43
Thanks a lot! { "/profile/*": { "target": "http://localhost:8888", "secure": false, "pathRewrite": { "^/profile": "http://localhost:8888/profile" }, "changeOrigin": true, "logLevel": "debug" } } – JDev Jul 03 '17 at 16:01
This is very strange, after restarting the idea again does not work. Cleaned the entire cache. (((((( – JDev Jul 03 '17 at 17:13
Can you paste the code snippet of yours here? Or is it the same as the one in your previous comment? – Srikkant Srinivasan Jul 04 '17 at 04:47
Also, I dont think there should be semicolons after "localhost:8888" and "localhost:8888/profile". – Srikkant Srinivasan Jul 04 '17 at 04:48
I think that again I found a mistake. My API in the code did look like that http://localhost:8888/profile, after change to /profile everything worked again. Now I'm looking for information and can not find how to set up a proxy for the production(by ng build). You know? At me there the server too works on other address. Thank you so much. – JDev Jul 04 '17 at 05:30
In all examples, it is said that there is no need to configure a proxy for the production. And how do I then indicate my root URL. If my api looks like this now /profile ... etc? Thanks – JDev Jul 04 '17 at 05:37
Incase you want to have a base URL for your production build, then I suggest having a global variable in your app, (in some service maybe) then all your other URLs can be baseurl + '/someurlhere' – Srikkant Srinivasan Jul 04 '17 at 06:27
Did as you said. Global variables inserted from environments. Everything is in order, but in the request my custom header again is missing. In what there can be a reason why angular in productive version overwrite my custom heders in request? Thanks for the help. – JDev Jul 04 '17 at 20:47
This discussion is getting too long. Mind if we switch over to your question and continue this there? Also, if it helped do upvote and accept my answer :) – Srikkant Srinivasan Jul 05 '17 at 04:53
Thanks. If you know the answer, I will be grateful for your reply. If not, then I will have to create a new topic, because I have not found a solution. And I'm more of a backend programmer myself. – JDev Jul 05 '17 at 05:40
You can also set like this. { "/api": { "target": "https://url.com/api", "secure": false, "changeOrigin": true, "logLevel": "debug", "pathRewrite": {"^/api" : ""} } } – Mandakh Jan 25 '19 at 02:37
"pathRewrite": {"^/api" : "http://url.com/api"} It worked for me in Angular 15 – Mahadev Mane Aug 13 '23 at 10:39

score 5 · Answer 5 · answered Nov 01 '17 at 19:31

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.

score 2 · Answer 6 · answered Mar 15 '19 at 17:27

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"
    }
  }
}

score 2 · Answer 7 · answered Jun 12 '19 at 08:21

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 '19 at 08:21

Sohail Ahmad

7,309
5
27
46

score 2 · Answer 8 · answered Apr 18 '21 at 18:26

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"
    },
...

Addition to `angular.json` is actually the necessary part. – Kirill G. Sep 24 '21 at 06:46 — Kirill G., Sep 24 '21 at 06:46

score 0 · Answer 9 · edited Mar 22 '22 at 07:51

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 '22 at 07:51

Jacques

6,936
8
43
102

answered Jun 04 '20 at 04:53

Anthoni Lawrance Arokiyasamy

39
4

score 0 · Answer 10 · edited Sep 13 '20 at 14:18

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 '20 at 14:18

fcdt

2,371
5
14
26

answered Sep 13 '20 at 13:56

DineshRaja

1

score 0 · Answer 11 · answered Sep 03 '21 at 14:04

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 03 '21 at 14:04

Schaki

1,697
1
12
14

Angular-CLI proxy to backend doesn't work

11 Answers11

Linked