angular-cli server - how to proxy API requests to another server?

angular angular-cli

266,187

Solution 1

UPDATE 2022

The officially recommended approach is now the one documented here

UPDATE 2017

Better documentation is now available and you can use both JSON and JavaScript based configurations: angular-cli documentation proxy

sample https proxy configuration

{
  "/angular": {
     "target":  {
       "host": "github.com",
       "protocol": "https:",
       "port": 443
     },
     "secure": false,
     "changeOrigin": true,
     "logLevel": "info"
  }
}

To my knowledge with Angular 2.0 release setting up proxies using .ember-cli file is not recommended. official way is like below

edit "start" of your package.json to look below

"start": "ng serve --proxy-config proxy.conf.json",
create a new file called proxy.conf.json in the root of the project and inside of that define your proxies like below
```
 {
   "/api": {
     "target": "http://api.yourdomai.com",
     "secure": false
   }
 }
```
Important thing is that you use npm start instead of ng serve

Read more from here : Proxy Setup Angular 2 cli

Solution 2

I'll explain what you need to know on the example below:

{
  "/folder/sub-folder/*": {
    "target": "http://localhost:1100",
    "secure": false,
    "pathRewrite": {
      "^/folder/sub-folder/": "/new-folder/"
    },
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

/folder/sub-folder/*: path says: When I see this path inside my angular app (the path can be stored anywhere) I want to do something with it. The * character indicates that everything that follows the sub-folder will be included. For instance, if you have multiple fonts inside /folder/sub-folder/, the * will pick up all of them
"target": "http://localhost:1100" for the path above make target URL the host/source, therefore in the background we will have http://localhost:1100/folder/sub-folder/
"pathRewrite": { "^/folder/sub-folder/": "/new-folder/" }, Now let's say that you want to test your app locally, the url http://localhost:1100/folder/sub-folder/ may contain an invalid path: /folder/sub-folder/. You want to change that path to a correct one which is http://localhost:1100/new-folder/, therefore the pathRewrite will become useful. It will exclude the path in the app(left side) and include the newly written one (right side)
"secure": represents wether we are using http or https. If https is used in the target attribute then set secure attribute to true otherwise set it to false
"changeOrigin": option is only necessary if your host target is not the current environment, for example: localhost. If you want to change the host to www.something.com which would be the target in the proxy then set the changeOrigin attribute to "true":
"logLevel": attribute specifies wether the developer wants to display proxying on his terminal/cmd, hence he would use the "debug" value as shown in the image

In general, the proxy helps in developing the application locally. You set your file paths for production purpose and if you have all these files locally inside your project you may just use proxy to access them without changing the path dynamically in your app.

If it works, you should see something like this in your cmd/terminal.

Solution 3

This was close to working for me. Also had to add:

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

Full proxy.conf.json shown below:

{
    "/proxy/*": {
        "target": "https://url.com",
        "secure": false,
        "changeOrigin": true,
        "logLevel": "debug",
        "pathRewrite": {
            "^/proxy": ""
        }
    }
}

Solution 4

EDIT: THIS NO LONGER WORKS IN CURRENT ANGULAR-CLI

See other answers for up-to-date solution

The server in angular-cli comes from the ember-cli project. To configure the server, create an .ember-cli file in the project root. Add your JSON config in there:

{
   "proxy": "https://api.example.com"
}

Restart the server and it will proxy all requests there.

For example, I'm making relative requests in my code to /v1/foo/123, which is being picked up at https://api.example.com/v1/foo/123.

You can also use a flag when you start the server: ng serve --proxy https://api.example.com

Current for angular-cli version: 1.0.0-beta.0

Solution 5

Here is another way of proxying when you need more flexibility:

You can use the 'router' option and some javascript code to rewrite the target URL dynamically. For this, you need to specify a javascript file instead of a json file as the --proxy-conf parameter in your 'start' script parameter list:

"start": "ng serve --proxy-config proxy.conf.js --base-href /"

As shown above, the --base-href parameter also needs to be set to / if you otherwise set the <base href="..."> to a path in your index.html. This setting will override that and it's necessary to make sure URLs in the http requests are correctly constructed.

Then you need the following or similar content in your proxy.conf.js (not json!):

const PROXY_CONFIG = {
    "/api/*": {
        target: https://www.mydefaulturl.com,
        router: function (req) {
            var target = 'https://www.myrewrittenurl.com'; // or some custom code
            return target;
        },
        changeOrigin: true,
        secure: false
    }
};

module.exports = PROXY_CONFIG;

Note that the router option can be used in two ways. One is when you assign an object containing key value pairs where the key is the requested host/path to match and the value is the rewritten target URL. The other way is when you assign a function with some custom code, which is what I'm demonstrating in my examples here. In the latter case I found that the target option still needs to be set to something in order for the router option to work. If you assign a custom function to the router option then the target option is not used so it could be just set to true. Otherwise, it needs to be the default target URL.

Webpack uses http-proxy-middleware so you'll find useful documentation there: https://github.com/chimurai/http-proxy-middleware/blob/master/README.md#http-proxy-middleware-options

The following example will get the developer name from a cookie to determine the target URL using a custom function as router:

const PROXY_CONFIG = {
    "/api/*": {
        target: true,
        router: function (req) {
            var devName = '';
            var rc = req.headers.cookie;
            rc && rc.split(';').forEach(function( cookie ) {
                var parts = cookie.split('=');
                if(parts.shift().trim() == 'dev') {
                    devName = decodeURI(parts.join('='));
                }
            });
            var target = 'https://www.'+ (devName ? devName + '.' : '' ) +'mycompany.com'; 
            //console.log(target);
            return target;
        },
        changeOrigin: true,
        secure: false
    }
};

module.exports = PROXY_CONFIG;

(The cookie is set for localhost and path '/' and with a long expiry using a browser plugin. If the cookie doesn't exist, the URL will point to the live site.)

View more solutions

266,187

elwyn

Updated on April 07, 2022

Comments

elwyn about 2 years

With the angular-cli ng serve local dev server, it's serving all the static files from my project directory.

How can I proxy my AJAX calls to a different server?
Marian Zagoruiko almost 8 years

Thanks for your answer @elwyn. Is it possible to proxy only urls matching some pattern, like '/api/v1/'?
elwyn almost 8 years

I'm not sure - I haven't had a need to do that. The webserver is just vanilla ember-cli under the hood (for now, anyway), so maybe look into their docs? This person seems to have an example of custom proxies running: stackoverflow.com/q/30267849/227622
Marian Zagoruiko almost 8 years

Did that yesterday. As you said, it's just vanilla ember-cli. So I've created an ember application, generated a proxy there (there is no such generator available in angular-cli yet) and copied in to my angular app. Works good. Thanks.
nicowernli over 7 years

How do you do with "unsafe" credentials. Using node I can set the process.env.NODE_TLS_REJECT_UNAUTHORIZED to 0 and will by pass that security, but I don't know how to do it with the proxy.config.json. This is all development stack, I don' t mind if it feels insecure
imal hasaranga perera over 7 years

having "secure":false should do, it should be a boolean not a string... i spent countless time by keeping it "false"
ocespedes about 7 years

This works for me but the with the proxy ends up being something like /api/api/person any idea why is this happening?
imal hasaranga perera about 7 years

can you share the proxy.conf.json of yours so I can have a look ?
heldt almost 7 years

where is the documentation for proxy.conf.json?
iCode almost 7 years

This works for me sometimes. But not always with current angular-cli version: 1.0.2. Problem is it connects to server and gets JSON responds. Then in chrome network console if we check, along with JSN data, it adds extra string. {"name":"something","id":"12sde"}Error occured while trying to proxy to: localhost:4200/api/v1/login. Any idea why it's happening? And not always. Detailed question here - stackoverflow.com/questions/44006326/…
JuanPablo almost 7 years

Here is the documentation: github.com/angular/angular-cli/wiki/stories-proxy
imal hasaranga perera almost 7 years

There are many other ways yout can do this, please refer to documentation github.com/angular/angular-cli/blob/master/docs/documentatio‌n/…
rjdkolb over 6 years

there is a stray comma "logLevel": "info", should be "logLevel": "info" (without the comma)
leoxs over 6 years

It's possible to make it work in productive environment using node express?
Andrew over 6 years

Thanks, this is the right answer for the current version of Angular. The "changeOrigin" option is only necessary if your target is not localhost, though. Also you need to load the proxy config file by running with the flag, ng serve --proxy-config proxy.conf.json Apparently ignores the flag inside package.json (as in the previous examples).
fariba.j almost 6 years

@imalhasarangaperera can I use an IP from a different network for the proxy target?
imal hasaranga perera almost 6 years

yes that is basic idea here, so as the ip address and the port is accessible from your local computer proxy should work fine
Justin over 4 years

Is there a way to add a single context that proxies all requests? It's annoying to have to add every single route that goes to the backend server.
ktsangop over 4 years

I would be grateful if someone could point to any documentation stating that the target key accepts an Object and not a String value. Angular and Webpack docs only show String as an accepted value.
Avishek almost 4 years

I've done the same thing but when I do ng build --prod, it is not working probably because proxy.conf doesn't gets added in dist folder. So what to do while production build
imal hasaranga perera almost 4 years

@Avishek this is not for production at all! you should not even try to get this to work in production. in production environment make sure that you have set up a server-level reverse proxy
Asif almost 3 years

@imalhasarangaperera how proxy will work for production environment? please guide me. what step I should follow to make it work on production?
Asif almost 3 years

@imalhasarangaperera how to setup reverse proxy?
imal hasaranga perera almost 3 years

Guys this is not for production! this is a quick way you can forward your requests to the dev or staging based on the config.. you need to have set up reverse proxies within the actual server which the code is going to deploy
chris_r almost 3 years

this should be chosen answer for external API reference locally. This pathRewrite was what resolves an issue when referencing external EP, replacing reference with target.
Vũ Ngô over 2 years

This is now in the official Angular documentation: angular.io/guide/build#proxying-to-a-backend-server. Follow the official tutorial so we can do ng serve without extra parameters