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

Question

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

User · Answer

Step 1 Go to Your root folder Create proxy conf json  x000D   x000D        auth            target    http   localhost 8000        secure   false       logLevel    debug        changeOrigin   true       x000D   x000D   x000D   Step 2 Go to package json find  quot scripts quot  under that find  quot start quot   x000D   x000D   start    ng serve --proxy-config proxy conf json   x000D   x000D   x000D   Step 3 now add  auth  in your http  x000D   x000D   return this http        post   auth register       username    simolee12    email    xyz gmail com    password    Anything Anything          x000D   x000D   x000D   Step 4 Final Step in Terminal run npm start

User · Answer

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  lt base href       gt  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  amp  amp  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

User · Answer

It s important to note that the proxy path will be appended to whatever you configured as your target  So a configuration like this         api          target    http   myhost com api                  and a request like http   localhost 4200 api will result in a call to http   myhost com api api  I think the intent here is to not have two different paths between development and production environment  All you need to do is using  api as your base URL   So the correct way would be to simply use the part that comes before the api path  in this case just the host address         api          target    http   myhost com

User · Answer

add in proxy conf json  all request to  api will be redirect to htt   targetIP targetPort api        quot  api quot          quot target quot    quot http   targetIP targetPort quot        quot secure quot   false       quot pathRewrite quot     quot   api quot    targeturl api        quot changeOrigin quot   true       quot logLevel quot    quot debug quot          in package json  make  quot start quot    quot ng serve --proxy-config proxy conf json quot   in code let url    quot  api clnsIt dev 78 quot   this url will be translated to http   targetIP targetPort api clnsIt dev 78   You can also force rewrite by filling the pathRewrite  This is the link for details cmd NPM console will log something like  quot Rewriting path from  quot  api     quot  to  quot http   targeturl targetPort api    quot   while browser console will log  quot http   loclahost api quot

User · Answer

We can find the proxy documentation for Angular-CLI over here   https   github com angular angular-cli blob master docs documentation stories proxy md  After setting up a file called proxy conf json in your root folder  edit your package json to include the proxy config on ng start  After adding      start    ng serve --proxy-config proxy conf json  to your scripts  run npm start and not ng serve  because that will ignore the flag setup in your package json   current version of angular-cli  1 1 0

User · Answer

In case if someone is looking for multiple context entries to the same target or TypeScript based configuration   proxy conf ts  const proxyConfig             context     api v1     api v2       target   https   example com       secure  true      changeOrigin  true              context             Rest of other API call     target   http   somethingelse com       secure  false      changeOrigin  true         module exports   proxyConfig    ng serve --proxy-config   proxy conf ts -o

User · Answer

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

User · Answer

Cors-origin issue screenshot  Cors issue has been faced in my application  refer above screenshot  After adding proxy config issue has been resolved  my application url  localhost 4200 and requesting api url  http   www datasciencetoolkit org maps api geocode json sensor false amp address    Api side no-cors permission allowed  And also I m not able to change cors-issue in server side and I had to change only in angular client side    Steps to resolve    create proxy conf json file inside src folder                   maps                target    http   www datasciencetoolkit org            secure   false           logLevel    debug            changeOrigin   true                   In Api request     this http        get lt GeoCode gt   maps api geocode json sensor false amp address     cityName         pipe          tap cityResponse   gt  this responseCache set cityName  cityResponse               Note  We have skip hostname name url in Api request  it will auto add while giving request  whenever changing proxy conf js we have to restart ng-serve  then only changes will update    Config proxy in angular json     serve                builder     angular-devkit build-angular dev-server              options                  browserTarget    TestProject build                proxyConfig    src proxy conf json                          configurations                  production                    browserTarget    TestProject build production                                          After finishing these step restart ng-serve Proxy working correctly as expect refer here   gt  WARNING in  gt  D  angular Divya Actian Assignment src environments environment prod ts  gt  is part of the TypeScript compilation but it s unused  Add only entry  gt  points to the  files  or  include  properties in your tsconfig   gt     Angular Live Development Server is listening on localhost 4200  open your browser on http   localhost 4200       Compiled  gt  successfully   HPM  GET  gt   maps api geocode json sensor false amp address chennai - gt   gt  http   www datasciencetoolkit org

User · Answer

EDIT  THIS NO LONGER WORKS IN CURRENT ANGULAR-CLI  See answer from  imal hasaranga perera 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

User · Answer

Here is another working example   angular cli 1 0 4    proxy conf json           api             target    http   localhost 8181        secure   false       logLevel    debug           login html           target    http   localhost 8181 login html        secure   false       logLevel    debug          run with    ng serve --proxy-config proxy conf json

User · Answer

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

User · Answer

I ll explain what you need to know on the example below       quot  folder sub-folder   quot          quot target quot    quot http   localhost 1100 quot        quot secure quot   false       quot pathRewrite quot            quot   folder sub-folder  quot    quot  new-folder  quot              quot changeOrigin quot   true       quot logLevel quot    quot debug quot           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   quot target quot    quot http   localhost 1100 quot  for the path above make target  URL the host source  therefore in the background we will have http   localhost 1100 folder sub-folder    quot pathRewrite quot      quot   folder sub-folder  quot    quot  new-folder  quot     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    quot secure quot   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   quot changeOrigin quot   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  quot true quot     quot logLevel quot   attribute specifies wether the developer wants to display proxying on his terminal cmd  hence he would use the  quot debug quot  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

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

Examples related to angular

Examples related to angular-cli