Search code examples
angularangular-cliwebpack-dev-serverhttp-proxy-middleware

Use angular-cli with multiple path proxy matching


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.


Solution

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