CODEWITHSUNDEEP
angularproxyangular-cli
elzoy
elzoy

Reputation: 5435

Angular-CLI proxy to backend doesn't work

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.

Upvotes: 68

Views: 133407

Answers (11)

vipinlalrv
vipinlalrv

Reputation: 3065

Please follow below steps

  1. 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
     }
   }

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

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

  3. call your backend api like this

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

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

Upvotes: 14

Anthoni Lawrance Arokiyasamy
Anthoni Lawrance Arokiyasamy

Reputation: 37

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.

Upvotes: 0

Schaki
Schaki

Reputation: 1791

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.

Upvotes: 0

dimeros
dimeros

Reputation: 101

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

Upvotes: 2

DineshRaja
DineshRaja

Reputation: 1

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

  1. Add the following:

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

  2. Run

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

Upvotes: 0

Sohail Ahmad
Sohail Ahmad

Reputation: 10147

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

Upvotes: 2

Mahesh
Mahesh

Reputation: 3997

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

Upvotes: 2

SoEzPz
SoEzPz

Reputation: 15912

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.

Upvotes: 5

Srikkant Srinivasan
Srikkant Srinivasan

Reputation: 808

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.

Upvotes: 11

Tony Scialo
Tony Scialo

Reputation: 5957

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

Upvotes: 29

Manish
Manish

Reputation: 2180

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

Upvotes: 82

Related Questions