Use angular-cli with multiple path proxy matching

Question

How can I define multiple paths to proxy in my proxy.conf.json? The angular-cli proxy documentation on github looks like you can only have one path (/api):

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

But when I look into the webpack proxy or the http-proxy-middleware documentation, I see it should be possible to define multiple paths (/api-v1 and /api-v2):

// Multiple entry
proxy: [
  {
    context: ['/api-v1/**', '/api-v2/**'],
    target: 'https://other-server.example.com',
    secure: false
  }
]

But I don't understand how I can get this into the proxy.conf.json.

Motion

github.com/angular/angular/blob/… – Afterburning

Answer 1

Use the following syntax in your proxy.conf.json:

[
  {
    "context": ["/api-v1/**", "/api-v2/**"],
    "target": "https://other-server.example.com",
    "secure": false
  }
]

Actual syntax that works is as below:

[
    {
        "context": [
            "/api",
            "/other-uri"
        ],
        "target": "http://localhost:8080",
        "secure": false
    }
]

Motion

Works, but where is this syntax documented? – Quemoy

github.com/angular/angular-cli/blob/master/docs/documentation/… – Kenyettakenyon

This github link is now dead.. :/ – Potemkin

Answer 2

The syntax for multiple entries (using context) is documented here: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md#multiple-entries

const PROXY_CONFIG = [
    {
        context: [
            "/my",
            "/many",
            "/endpoints",
            "/i",
            "/need",
            "/to",
            "/proxy"
        ],
        target: "http://localhost:3000",
        secure: false
    }
]

module.exports = PROXY_CONFIG;

This also requires that you rename your config from .json to .js and point your run command at the new file.

For me the context syntax doesn't quite work (I assume because I want to use wildcards). So I came up with the following solution which allows you to generate a config:

module.exports = [
  "/my",
  "/many",
  "/endpoints",
  "/i",
  "/need",
  "/to",
  "/proxy",
  "/folder/*"
].reduce(function (config, src) {
  config[src] = {
    "target": "http://localhost:3000",
    "secure": false
  };
  return config;
}, {});

This got the job done for me. (note that this still requires that your rename your proxy.conf.json to proxy.conf.js and edit your run command to point at the renamed file)

Abatis

this github link no longer works – Glasscock

Answer 3

As of 2021-03, here is the answer:

1. In the CLI configuration file, angular.json, add/modify the proxy file:

   ...
   "architect": {
     "serve": {
       "builder": "@angular-devkit/build-angular:dev-server",
       "options": {
         "browserTarget": "your-application-name:build",
         "proxyConfig": "src/proxy.conf.js"
       },
   ...
   

2. Create a proxy.conf.js such as:

   const PROXY_CONFIG = [
       {
           context: [
               "/my",
               "/many",
               "/endpoints",
               "/i",
               "/need",
               "/to",
               "/proxy"
           ],
           target: "http://localhost:3000",
           secure: false
       }
   ]
   module.exports = PROXY_CONFIG;
   

Note it is .js, not .json.

Official Details

Update, 2021-07-08 It takes .js or .json. Former one is better as it allows // comment.

For SSL:

"target" : "https://localhost:3001", 
        "changeOrigin": true,       // solves CORS Error in F12
        "logLevel": "debug",        //"info": prints out in console
        "rejectUnauthorzied": true, // must be false if not specify here
        "secure": false,            // PROD must be "true", but DEV false else "UNABLE_TO_VERIFY_LEAF_SIGNATURE"
        "strictSSL": true,          // must be false if not specify here
        "withCredentials": true     // required for Angular to send in cookie

Mindexpanding