Understanding SAP Cloud Platform Destination in SAP UI5 app

SAP UI5 is a client javascript library the browser downloads from web server (front end server) to render web UI. Usually the business data come from other backend servers, which is in a different domain from the web server. Due to the browser's same origin policy, browser cannot make cross domain requests to the backend server.

For SAP UI5 app deployed in SAP Cloud Platform (SCP), the same origin issue can be solved by with Destination. Basically Destination in SCP works as a proxy based on url path. When defining Destination in SCP, a unique name and url is configured in SCP admin. So SCP will know where to send the odate request to the backend server.

Another benefit to use Destination is, the SCP admin can change the Destination url after the web app is already deployed to web server, so admin can switch the odata backend url from production server to testing server without updating the web application.

In SAP UI5 app, when a odata data source is added into the project, neo-app.json will create an item with path and target information as below:
    {
      "path": "/John/NorthwindDest",
      "target": {
        "type": "destination",
        "name": "NorthwindDest"
      },
      "description": "Northwind odata service"
    }

The target.name must match the SCP Destination name, so SCP knows which destination is used by the app. The path is an url pattern, which means when an odata request is sent to server, the server will check, if the url match the path defined in neo-app.json, then redirect the request to matched Destination.

The Path of "/John/NorthwindDest" is just a unique identify and its value can be anything you define, for example, you can replace "/John/NorthwindDest" to "/Server/MyUniqueID". And then in the UI5 application, for any xmlhttprequests sent from client with the path starting with "/Server/MyUniqueID", the server will redirect the request to the matched Destination's url .

The UI5 app manifest.json data source and model definition should use the same pattern in their uri definition.
"dataSources": {
"Northwind.svc": {
"uri": "/John/NorthwindDest/v2/Northwind/Northwind.svc/",
"type": "OData",
"settings": {
"odataVersion": "2.0",
"localUri": "localService/metadata.xml"
}
}
}

"models": {
"": {
"uri": "/John/NorthwindDest/v2/Northwind/Northwind.svc/",
"type": "sap.ui.model.odata.v2.ODataModel",
"settings": {
"defaultOperationMode": "Server",
"defaultBindingMode": "OneWay",
"defaultCountMode": "Request"
},
"dataSource": "Northwind.svc",
"preload": true
}
},


This can be verified using javascript network trace, when UI5 app starts it will request oData metadata from backend, the request sent to server has the below url
https://webidetesting7287641-i826633trial.dispatcher.hanatrial.ondemand.com/John/NorthwindDest/v2/Northwind/Northwind.svc/$metadata?sap-langu

And SAP Cloud Platform will switch the url based on the Destination match to
http://services.odata.org/V2/Northwind/Northwind.svc/$metadata?sap-language=EN

The destination is defined as

In order to run a SAP UI5 app on different web server, like asp.net, then the request handler must implement the logic to handle Destination proxy, so it needs parsing the content in neo-app.json, and then when client requests come, it needs to check whether the url pattern match a destination, if so, the request needs to be redirect to the url defined in the destination.