Angular-cli: issues setting up the proxy to handle complex requests going to another domain

Question

I am busy with a web app that needs to make http requests to a server on my local network. i'm using Angular-cli to build/run my project. When makeing any complex requests i'm running into CORS issues and trying to use the angular-cli proxy to handle those complex requests... I set it up exactly as it's done on the angular-cli github page but it doesn't seem to work. Any idea what i'm doing wrong?

my code:

proxy.conf.json:

{
"/api":{
"target":"http://10.60.160.34/BRMServices/WebEnquiry/",
"secure":false
}
}

from package.json:

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

a function with a complex request that's supposed to go to the proxy:

postStockTake(stockTakeModel: StockTakeModel) : Observable<Response> {    
  return this.http.post("/api" + "/StockTake/AddToStockTake", JSON.stringify(stockTakeModel), {headers: this.headers})
        .map((res: Response) => res.json())
        .catch((error: any) => Observable.throw(error.json().error || 'server error'));
  }

I then run the app with npm start instead of ng serve... When it starts to build I see the following in my command prompt console:

> [email protected] start C:\Users\User1\Documents\trade-link\barcode-checker
> ng serve --proxy-config proxy.conf.json

And in my chrome dev tools console I see:

zone.js:1725
POST
http://localhost:4200/api/StockTake/AddToStockTake
405 (Method Not Allowed)

So it's clearly still trying to post to localhost even though I added the local server's IP address in the target value of the proxy.conf file?

Community · Accepted Answer · 2017-05-23 12:17:49Z

6

I had similar problem before and I found out that proxy map path not as was expected.

When I have config:

{
  "/api":{
  "target":"http://10.60.160.34/BRMServices/WebEnquiry/",
  "secure":false
}

I expect all requests to api/<sub-path> path will be mapped to http://10.60.160.34/BRMServices/WebEnquiry/<sub-path>, but it's incorrect.

Your virtual path api/<sub-path> will be mapped to:

http://10.60.160.34/BRMServices/WebEnquiry/api/<sub-path>

So I got incorrect url I and my server throwing similar error. Solution for was to remove incorrect api subpath from my destination url using next configuration option

{
  "/api": {
    "target": "http://10.60.160.34/BRMServices/WebEnquiry/",
    "secure": false,
    "pathRewrite": {"^/api" : ""}
  }
}

I had similar question but did not receive answer so found solution for my problem themself.

Redirect Angular2 http requests through proxy

Hope this helps.

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Jan 16, 2017 at 8:55

VadimB

5,7213 gold badges39 silver badges49 bronze badges

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

4 Comments

user2094257 Over a year ago

Thanks @VadimB that fixed it!:)

VadimB Over a year ago

Cool, glad to help you :)

Mike Bovenlander Over a year ago

Thanks! you saved my day! Also Juri Strumpflohner explains it very well in a video on his blog: juristr.com/blog/2016/11/configure-proxy-api-angular-cli

Sai Manoj Over a year ago

@VadimB Any idea to use proxy in Prod build?

Collectives™ on Stack Overflow

Angular-cli: issues setting up the proxy to handle complex requests going to another domain

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related