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.

github.com/angular/angular/blob/…

yurzui
– yurzui

2021-02-19 13:05:02 +00:00
Commented Feb 19, 2021 at 13:05 — yurzui
– yurzui, Commented Feb 19, 2021 at 13:05

Hardik Trivedi · Accepted Answer · 2017-11-08 06:34:44Z

17

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 8, 2017 at 6:34

Hardik Trivedi

6,1525 gold badges34 silver badges53 bronze badges

answered Jun 12, 2017 at 7:47

Hans

7291 gold badge9 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Markus Pscheidt Over a year ago

Works, but where is this syntax documented?

dotnet-provoke Over a year ago

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

dstj Over a year ago

This github link is now dead.. :/

Martin · Accepted Answer · 2018-06-15 09:56:32Z

4

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)

edited Jun 15, 2018 at 9:56

answered Jun 15, 2018 at 9:33

Martin

1135 bronze badges

1 Comment

Maurice Over a year ago

this github link no longer works

Jeb50 · Accepted Answer · 2021-07-08 23:48:31Z

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

Collectives™ on Stack Overflow

Use angular-cli with multiple path proxy matching

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related