Skip to Content
Technical Articles

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

 

 

 

Be the first to leave a comment
You must be Logged on to comment or reply to a post.