403 Forbidden Error on CAP Service when running UI5 app on locally

[RachitGupta]

Hi Community,

I am currently experiencing an issue when i am trying to run UI5 App locally which is consuming a CAP service. I get 403 forbidden error on the CAP service and the metadeta does not load. I have setup the approuter and I am using default-env.json to run my local setup. My front-end app runs on localhost:5000 and CAP service runs on localhost:4000. When I run the front-end the UI gets authenticated via XSUAA but the services return 403 error, any pointers to resolve this issue?
package.json of CAP Project

{
  "name": "Test",
  "version": "0.0.2",
  "repository": "<Add your repository here>",
  "license": "ISC",
  "dependencies": {
    "@sap/cds": "3.34.3",
    "@sap/hana-client": "2.20.20",
    "@sap/xsenv": "^5.1.0",
    "@sap/xssec": "^3.6.1",
    "axios": "1.6.8",
    "currency-symbol": "1.0.6",
    "dotenv": "^16.4.5",
    "express": "^4.19.2",
    "fiscal-year": "1.0.0",
    "helmet": "^7.1.0",
    "moment": "2.30.1",
    "passport": "^0.7.0",
    "uuid": "^9.0.1",
    "xlsx": "^0.18.5"
  },
  "engines": {
    "node": "^18",
    "npm": "^6"
  },
  "scripts": {
    "preinstall": "echo %npm_package_name%",
    "build": "cds build/all --clean",
    "deploy:cds": "cds deploy",
    "start": "cds run",
    "build:mta": "cds build/all && mbt build -p=cf",
    "deploy:cf": "npm run build:mta && cf deploy mta_archives/%npm_package_name%_%npm_package_version%.mtar",
    "push": "cf deploy mta_archives/%npm_package_name%_%npm_package_version%.mtar",
    "test": "jest",
    "testWatch": "jest --watch --expand --all",
    "coverage": "jest --coverage",
    "watch": "nodemon --watch \"./**\" --exec \"cds run\""
  },
  "cds": {
    "hana": {
      "deploy-format": "hdbtable"
    },
    "requires": {
      "db": {
        "kind": "hana",
        "model": [
          "db",
          "srv"
        ]
      },
      "uaa": {
        "kind": "xsuaa"
      }
    },
    "odata": {
      "version": "v4"
    }
  },
  "files": [
    "db",
    "srv"
  ],
  "devDependencies": {
    "jest": "^29.7.0",
    "nodemon": "^3.1.0"
  }
}

Package.json of the front-end app

{
  "name": "users",
  "version": "0.0.1",
  "engines": {
    "node": "^18"
  },
  "scripts": {
    "start": "node node_modules/@sap/approuter/approuter.js",
    "start:flp": "ui5 serve -o flpSandbox.html",
    "serve": "ui5 serve",
    "test": "run-s lint karma",
    "karma-ci": "karma start karma-ci.conf.js",
    "clearCoverage": "shx rm -rf coverage",
    "karma": "run-s clearCoverage karma-ci",
    "lint": "eslint .",
    "build:mta": "mbt build",
    "deploy:cf": "cross-var cf deploy mta_archives/users_$npm_package_version.mtar",
    "deploy": "run-s build:mta deploy:cf",
    "build:ui": "ui5 build --clean-dest --include-task=generateManifestBundle --dest deployer/resources/webapp"
  },
  "dependencies": {
    "@openui5/sap.m": "^1.75.0",
    "@openui5/themelib_sap_belize": "^1.75.0",
    "@openui5/themelib_sap_fiori_3": "^1.75.0",
    "@sap/approuter": "^9.1.0",
    "appdata-path": "^1.0.0",
    "shx": "^0.3.2"
  },
  "devDependencies": {
    "@ui5/cli": "^2.4.1",
    "eslint": "^6.8.0",
    "karma": "^5.0.9",
    "karma-chrome-launcher": "^3.1.0",
    "karma-coverage": "^2.0.1",
    "karma-ui5": "^1.1.0",
    "mbt": "1.0.9",
    "npm-run-all": "^4.1.5",
    "ui5-middleware-cfdestination": "^0.1.5",
    "ui5-middleware-livereload": "^0.1.7"
  },
  "ui5": {
    "dependencies": [
      "ui5-middleware-cfdestination",
      "@openui5/sap.m",
      "@openui5/themelib_sap_belize",
      "@openui5/themelib_sap_fiori_3",
      "ui5-middleware-livereload"
    ]
  }
}

xs-app.json of the front-end app 
 

{
  "welcomeFile": "/index.html",
  "authenticationMethod" : "route",
  "routes": [
    {
      "source": "^/admin/(.*)$",
      "target": "/admin/$1",
      "authenticationType": "xsuaa",
      "destination": "srv_api",
      "csrfProtection": false
    },
    {
      "source": "^/master/(.*)$",
      "target": "/master/$1",
      "authenticationType": "xsuaa",
      "destination": "srv_api",
      "csrfProtection": false
    },
    {
      "source": "^/profile/(.*)$",
      "target": "/profile/$1",
      "authenticationType": "xsuaa",
      "destination": "srv_api",
      "csrfProtection": false
    },
    {
      "source": "^/user/(.*)$",
      "target": "/user/$1",
      "authenticationType": "xsuaa",
      "destination": "srv_api",
      "csrfProtection": false
    },
    {
      "source": "^/forecast/(.*)$",
      "target": "/forecast/$1",
      "authenticationType": "xsuaa",
      "destination": "srv_api",
      "csrfProtection": false
    },
    {
      "source": "^(.*)$",
      "target": "$1",
      "localDir": "webapp"
    }
  ]
} 

 Regards,

Rachit Gupta