How to configure proxy with Angular 17 (esbuild/vite)

Question

I used to use a proxy with Angular <= 16, using webpack.

Switching to Angular 17 and default esbuild/vite, the proxy configuration does not seem to work anymore.

This configuration used to work:

{
    "/api/*": {
        "target": "http://localhost:8080",
        "secure": false,
        "changeOrigin": true,
        "pathRewrite": {
            "^/api": ""
        }
    }
}

I tried the following two ways to provide the config:

• ng serve --proxy-config proxy.conf.json
• Setting proxyConfig in angular.json

In both ways the configuration seems to be ignored.

I'm using Angular (including CLI) 17.0.8 and Node v18.17.0.

Thanks for your help!

I tried to provide the proxy configuration to Angular, expected it to proxy the requests, but the request were not proxied.

Dextrorotation

I am facing the same issue since I started using Angular 17 while in old versions it was working fine – Yaya

Answer 1

Add two ** instead one *

this way:

{
    "/api/**": {
        "target": "http://localhost:8080",
        "secure": false,
        "changeOrigin": true,
        "pathRewrite": {
           "^/api": ""
        }
    }
}

Sib

This works! :D But do you know why this is needed? – Gastrostomy

Yeah, does anyone know why?! A tiny change like this is made with no explanation and no documentation that I could see. I'd love to hear how this happened from 16 to 17. – Edgaredgard

Worked for me thank you! – Wilfredwilfreda

You saved my life! – Azar

Thank you so much, I wasted hours on this. I am with Rap on this one, no documentation for this. Why was this done? Any explanation would surely help. – Alleenallegation

More information about the options are available on the http-proxy-middleware website. – Bourn

Answer 2

I encountered the same issue after upgrading from Angular 17 to 18, and the solution above worked for one of my REST API routes.

However, I also had a GraphQL endpoint that wasn't working. I discovered that this was due to the URLs being formatted like "/graphql/?name_of_the_function," which I use in development for easier request tracking when checking results in the network tab. I found that it only worked if I added the following configuration:

    "/graphql": {
  "target": "http://localhost:3300/graphql",
  "secure": false,
  "logLevel": "debug",
  "changeOrigin": true,
  "pathRewrite": {
    "^/graphql": ""
  }
}

Noticing that it worked without wildcards, I applied a similar configuration to my REST API route, and it was successful:

"/api": {
  "target": "http://localhost:3300/v1",
  "secure": false,
  "logLevel": "debug",
  "changeOrigin": true,
  "pathRewrite": {
    "^/api": ""
  }
}

So, it turns out that it works perfectly fine without any wildcards.

The request for REST API is http://localhost:3300/api/v1/auth/login The request for graphql is http://localhost:3300/graphql/?name_of_the_function

Kike

for some reason, the answer by Juan did not work by me, but this did – Corsage