Cross Origin access to XSJS API

In this blog we will see how to perform cross origin calls to HANA XSJS APIs or simple terms calling our API from a different application.

Lets first understand what is CORS:
As per [link] Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, or port) from its own.

For security reasons, browsers restrict cross-origin HTTP requests initiated from scripts. Although we can disable CORS for our testing using the keyword --disable-web-securityon our chrome browser, for a productive scenario it is required to enable cross origin access in a more restrictive manner if the APIs are from different origin.

The example below exactly demonstrates how we can achieve cross origin calls to HANA XSJS APIs this.

We have a xsjs service developed which we are calling using the the ajax call in our UI5 or AngularJS Frontend.

$.ajax({
    type: "GET",
    url: "https://xxxxx.hana.ondemand.com/com/xs/xsjs/corsTest.xsjs",
    beforeSend: function(xhr) {
        xhr.setRequestHeader("Authorization", "Basic MTAxxxxDIw");
    },
    crossDomain: true,
    dataType: "json",
    success: function(result) {
        console.log(JSON.stringify(result));
    },
    error: function(response) {}
});

A typical response would be:

The headers show “same-origin”

Things are working fine for same origin calls. Now lets try calling the ajax call from a different application. For our test scenario let us consider stackoverflow. On calling the ajax call we get the CORS error:

“Access to XMLHttpRequest at ‘https://xxxx.hana.ondemand.com/com/xs/xsjs/corsTest.xsjs?_=1573139856’ from origin ‘https://stackoverflow.com’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”

Lets check at the Network tab, we see that the method is changed from GET to OPTIONS:

The request headers show “cross-site” and Origin as “https://stackoverflow.com”

Now to allow access for our xsjs for cross domain we need to add the below details in our .xsaccess file:

{
    "exposed": true,
    "cors": {
        "enabled": true,
        "allowMethods": [
            "GET",
            "POST",
            "HEAD",
            "OPTIONS"
        ],
        "allowHeaders": [
            "Accept",
            "Authorization",
            "Content-Type",
            "X-CSRF-Token"
        ],
        "allowOrigin": [
            "*"
        ],
        "maxAge": "3600"
    },
    "headers": {
        "enabled": true
    },
    "exposeHeaders": [
        "x-csrf-token"
    ]
}

To allow access from a specific website change the (*) with your Website URL in “allowOrigin” section. Coming to our xsjs service add the headers:

$.response.headers.set("Access-Control-Allow-Origin", "*");

Now lets test again, We see the response from our HANA XS retrieved successfully:

Lets go to network tab, the request method is changed to GET:

And the request headers:

We are now successfully able to access our XSJS API on other platforms.

For more reference you can check: https://help.sap.com/viewer/400066065a1b46cf91df0ab436404ddc/2.0.02/en-US/a9fc5c220d744180850996e2f5d34d6c.html#loioa9fc5c220d744180850996e2f5d34d6c__section_N101F1_N10016_N10001

https://answers.sap.com/questions/314212/cors-issue-with-ui5–xsjs-application.html

Anonymous Call to access XSJS service using SQLCC:
https://blogs.sap.com/2014/07/23/anonymous-call-to-access-xsjs-service-using-sqlcc/

Thanks,
Mayur