Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

Json – How to configure proxy with Angular 18

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"
  }
}```
Tags:

2

Answers


  1. 0

    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": ""    
    }
  }
}
    Login or Signup to reply.
  2. 0

    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
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search