Angular 8 - Setting proxy for HTTP API Calls

Question

It's possible to set a proxy URL when making a HTTP Rest API request using curl.

Does angular http client provide an option to set proxy when making API calls?

I looked at Angular documentation, but haven't seen any such setting.

UPDATE:

I have a CI/CD environment, where an angular build happens and the build is uploaded to an S3 Bucket in AWS. I believe I can not run ng serve manually in AWS to pass the proxy config file as a parameter. Therefore, I was looking for a solution, where we may send a header to the Angular Http client or something like that, like what curl does.

read this. this is a nice resource https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md — rdRahul, Nov 13 '19 at 19:13
Not to be too snide, but *you need to spend more time with google*. See [these results](https://www.google.com/search?q=angular+proxy+requests), one of which contains my brief answer below. — theMayer, Nov 14 '19 at 04:50
Possible duplicate of [angular-cli server - how to proxy API requests to another server?](https://stackoverflow.com/questions/37172928/angular-cli-server-how-to-proxy-api-requests-to-another-server) — theMayer, Nov 14 '19 at 04:52

score 0 · Answer 1 · answered Nov 14 '19 at 04:46

0

This is rather trivial. When using ng serve, if there is a file in the same directory as package.json called proxy.conf.json, the webpack server will be configured to proxy requests as defined in the file. An example proxy config is defined below.

To use a different file name, simply pass in --proxy-config myfile.conf.json as an argument to ng serve. This can even be configured as an npm script in the package.json file.

Sample proxy.conf.json

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

answered Nov 14 '19 at 04:46

theMayer

15,456
7
58
90

Thank you, but this approach doesn't work in a CI/CD environment, where we need to build once and deploy the code to an S3 Bucket in AWS. Because, we can't run ng serve there. Therefore, I was looking for a solution, where we may send a header to the Angular Http client or something like that, like what curl does. – Jake Nov 16 '19 at 03:36
@Jake - I have no idea what scenario you have, but S3 buckets serve static files. There is no proxy on S3. Webpack server proxy is for local development only. Your build process should not depend on the runtime configuration. – theMayer Nov 16 '19 at 04:14

score 0 · Answer 2 · answered Nov 16 '19 at 05:42

proxy config is a thing that is only related to development. Once you build and deploy your app a proxy is not used. ng serve runs a local dev server and the proxy config is so you can redirect your api calls to a different port so your Angular app can hit your development api running on a different port without getting cross origin request issues. When you deploy your app in production the Angular app and api need to be hosted on the same domain and port. Proxy config is not for prod ever, it is only a dev concept.

Angular 8 - Setting proxy for HTTP API Calls

2 Answers2