Why can't my Fiori module access a destination when started as "HTML5 Application", but is working fine inside BAS?

Question

I'm currently developing a MTA with a Fiori sub-module using SAP Business Application Studio. When I start the Fiori sub-module using "npm start" everything is working fine and I can connect to the remote destination. The problem occurs when I deploy the application to the cloud and it is listed under "HTML5 Applications". When I start it from there, it fails with 404 errors:

Picture of the errors

Here is the file xs-app.json from the module:

{
  "welcomeFile": "/index.html",
  "authenticationMethod": "route",
  "routes": [
    {
      "source": "^/sap/(.*)$",
      "target": "/sap/$1",
      "destination": "REMOTE",
      "authenticationType": "xsuaa",
      "csrfProtection": false
    },
    {
      "source": "^/resources/(.*)$",
      "target": "/resources/$1",
      "authenticationType": "none",
      "destination": "ui5"
    },
    {
      "source": "^/test-resources/(.*)$",
      "target": "/test-resources/$1",
      "authenticationType": "none",
      "destination": "ui5"
    },
    {
      "source": "^(.*)$",
      "target": "$1",
      "service": "html5-apps-repo-rt",
      "authenticationType": "xsuaa"
    }
  ]
}

I can provide further files if required.

How can I solve the problem of the application not being able to access /sap?

I tried enabling/disabling csrfProtection and searching for answers online.

Answer 1

Is destination "REMOTE" configured in BTP?

Global Account > Sub Account > Connectivity > Destinations