How to configure proxy with Angular 18

Question

I migrated my angular 17 project to angular 18 and fount out that proxy.conf.json did not worked for me. What might be the problem here? Thank you in advance

"{
    /api/*": {
    "target": "http://127.0.0.1:8000",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}```

Adkison

Oh wow, I'm facing the same problem after migrating to Angular 18. My proxy.conf.json looks just like yours, and it's not working either. I've been trying to figure out what could be wrong but haven't had any luck so far. If anyone has any solutions or ideas, I'd really appreciate it! Thanks in advance. – Dingo

By luck i was doing brute force and found out that /api/** adding two ** after API works for me. Please try this out and if you need any help with it please reply. – Adkison

I tried updating my proxy.conf.json to use /api/**, and it worked perfectly! Thanks so much for the tip! If I run into any other issues, I'll definitely reach out. Thanks again for your help! – Dingo

Answer 1

for me it was this response that worked, adding the pathRewrite param :

{
    /api/*": {
    "target": "http://127.0.0.1:8000",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
    "pathRewrite": {
      "^/api": ""    
    }
  }
}

Horthy

It didn't work for me because i was using an interceptor, and "pathRewrite": { "^/api": "" } was set to an empty string. For instance, I had an endpoint "/api/user", but it was returning "/user" – Adkison

Answer 2

I share the config that I used updating Proxy with Bypass settings (before Angular 18) to Proxy using http-proxy-middleware (since Angular 18 https://angular.dev/tools/cli/serve#proxying-to-a-backend-server)

angular.json config

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "configurations": {
        "totoTestProfile": {
          "buildTarget": "your-application:build",
          "proxyConfig": "proxy/proxy.conf.js"
        },

Before Upgrade (Angular < 18)

proxy.conf.js config :

const PROXY_CONFIG = {
    context: [
        "/api",
        "/oauth2",
        "/login/oauth2",
        "/exploitation"
    ],
    "target": "http://localhost:8083/",
    "secure": false,
    "bypass": function (req, res, proxyOptions) {
        req.headers["webpass-remote-user"] = "TOTO_USER";
    }
}

module.exports = PROXY_CONFIG;

After Upgrade (Angular 18)

proxy.conf.js config :

const PROXY_CONFIG = [
    {
        context: [
            "/api",
            "/oauth2",
            "/login/oauth2",
            "/exploitation"
        ],
        "target": "http://localhost:8083/",
        "secure": false,
        onProxyReq: (proxyReq) => {
            proxyReq.setHeader('webpass-remote-user','TOTO_USER');
        },
    },
];

module.exports = PROXY_CONFIG;

and you need to add http-proxy-middleware to devDependencies in package.json

npm install --save-dev http-proxy-middleware

launch your app with

ng serve --configuration=totoTestProfile

Copperplate