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.

https://github.com/angular/angular/blob/6ad057d28cf432ff0c67d3fcf9fc9a51aa5c43a5/aio/content/guide/build.md#proxy-multiple-entries — yurzui, Feb 19 '21 at 13:05

score 16 · Accepted Answer · edited Nov 08 '17 at 06:34

16

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
    }
]

edited Nov 08 '17 at 06:34

Hardik Trivedi

5,677
5
31
51

answered Jun 12 '17 at 07:47

Hans

681
1
9
22

2

Works, but where is this syntax documented? – Markus Pscheidt Dec 07 '17 at 13:37
https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md – dotnet-provoke Sep 27 '19 at 20:37
This github link is now dead.. :/ – dstj Jun 01 '23 at 20:50

Martin · Answer 2 · 2018-06-15T09:56:32.057

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)

this github link no longer works – Maurice May 16 '22 at 13:09 — Maurice, May 16 '22 at 13:09

Jeb50 · Answer 3 · 2021-07-08T23:48:31.720

As of 2021-03, here is the answer:

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"
    },
...

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

Use angular-cli with multiple path proxy matching

3 Answers3

Linked