Proxy configuration did not working with angular CLI

Question

8080 – Port where backend is hosted 4200 – my Angular2 frontend

In My Angular2 project i have file proxy.config.json with content like this

{
  "/api": {
  "target": "http://localhost:8080",
  "secure": false,
  "changeOrigin": "true",
  "pathRewrite": {"^/api": ""}
 }
}

In Angular2 package.json I changed start procedure to "start": "ng serve --proxy-config proxy.config.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.getUsers();
  }

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

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

Console output of visual studio code is

 10% building modules 2/2 modules 0 active[HPM] Proxy created: /api/  ->  http://localhost:8080
[HPM] Proxy rewrite rule created: "^/api" ~> ""
[HPM] Subscribed to http-proxy events:  [ 'error', 'close' ]
Hash: d102bcd0909a1776c844
Time: 27041ms
chunk    {0} main.bundle.js, main.bundle.map (main) 13.6 kB {2} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.bundle.map (styles) 130 kB {3} [initial] [rendered]
chunk    {2} vendor.bundle.js, vendor.bundle.map (vendor) 3.87 MB [initial] [rendered]
chunk    {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.
[HPM] Rewriting path from "/api/getusers" to "/getusers"
[HPM] GET /api/getusers ~> http://localhost:8080

This is browser console response:

GET http://localhost:4200/api/getusers 404 (Not Found)
error_handler.js:54 EXCEPTION: Response with status: 404 Not Found for URL: http://localhost:4200/api/getusers
Subscriber.js:238 Uncaught Response {_body: "<html><head><title>Apache Tomcat/7.0.47 - Error re…hade"><h3>Apache Tomcat/7.0.47</h3></body></html>", status: 404, ok: false, statusText: "Not Found", headers: Headers…}

have you tried with full URL localhost:4200/api/getusers instead of /api/getusers — isuruAb
– isuruAb, Commented Feb 20, 2017 at 7:40
my backend is hosted at localhost:8080/api thats why i am using proxy setting, and localhost:8080/api/getusers working fine. — DanzerZoneJS
– DanzerZoneJS, Commented Feb 20, 2017 at 7:42

isuruAb · Accepted Answer · 2017-02-20 19:18:35Z

6

I have tried this way. my proxy.conf.json file is like this:

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false,
    "changeOrigin": "true",
    "pathRewrite": {"^/api": ""}
  }
}

and I have replaced "start": "ng serve" with this "start": "ng serve --proxy-config proxy.conf.json" in package.json

my app.component.ts file is like this:

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

  getUsers(): any {
    return this.http.get("http://localhost:4200/api/getusers")
      .subscribe(response => {
        console.log(response);

      })
  }

in my API it provides set of user from http://localhost:8080/getusers URL

answered Feb 20, 2017 at 19:18

isuruAb

2,2405 gold badges28 silver badges39 bronze badges

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

1 Comment

Vipul Over a year ago

But, why do you need http://localhost:4200/api/getUsers'. Try providing this.http.get('api/getUsers').

Gustavo MRF · Accepted Answer · 2021-08-05 15:43:50Z

1

json doesn't work in my project, but in JS works.

Example: proxy.conf.js file

const PROXY_CONFIG = [
   {
    context: ['/api'],
    target: 'http://localhost:8080/',
    secure: false,
    logLevel: 'debug',
    pathRewrite: {'^/api' : ''}
  }
];
module.exports = PROXY_CONFIG;

In package.json :

...
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.js", //this line
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
...

In service.ts:

use this URL: '/api/getusers'

Finally you shuld to start with:

npm start

answered Aug 5, 2021 at 15:43

Gustavo MRF

112 bronze badges

Comments

Francisco Acuña Amaya · Accepted Answer · 2018-01-09 17:42:14Z

-2

Try

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

answered Jan 9, 2018 at 17:42

Francisco Acuña Amaya

9

Comments

Dimitar Spasovski · Accepted Answer · 2018-06-29 16:21:54Z

-2

Use this, it's working fine.

{
  "/api/*": {
    "target": "https://172.16.2.10",
    "secure": false,
    "pathRewrite": {
      "^/api/*": ""
    },
    "changeOrigin": true
  }
}

edited Jun 29, 2018 at 16:21

Dimitar Spasovski

2,18210 gold badges29 silver badges48 bronze badges

answered Jun 29, 2018 at 13:33

kaushlesh shukla

73 bronze badges

1 Comment

Dimitar Spasovski Over a year ago

Please expand your answer. What was the op doing wrong, why is your code working etc...

Collectives™ on Stack Overflow

Proxy configuration did not working with angular CLI

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related