Skip to Content

I hope If you have reached here, You should have some idea about cors by now.

While working on UI5 , if we want to call a let’s say oData or XSJS service. It is suggested to set destination in our HANA cockpit then consume  the service.

Well what if we got a case where we cannot set destination and we have no other option than using the whole URL.

What happens when we make a get or post something from a different URL.

The call seeks for some headers like :  authentication , resource sharing , content-type, And because we don’t have one header, we get error while calling different URL.

Normal case when we make a ajax call :

var url= "https://XXXXXXXXXXXXXXXXXXXXXXresult.xsjs";
                    $.ajax({ 
              type: 'GET', 
              url: url, 
              async:false,
              contentType: "application/html",
              beforeSend: function (xhr) {
                      xhr.setRequestHeader ("Authorization", "Basic " + btoa('username' + ":" + 'password'));
                  },
                  success : function(data) {
}

Error :        https://XXXXXXXXXXXX/result.xsjs: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://XXXXXXXXXhana.ondemand.com’ is therefore not allowed access.

 

Response header.

 

Well let’s try to understand the error message :  No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Obviously our browser is seeking for some header that will tell that yes we can allow cross origin calls for this service/resource.

Browser seeks for some header response (‘Access-Control-Allow-Origin’) from the service we are calling which is not present in our service.

How to fix it. 

  1. We need to tell our ajax call that we are making a cross origin call.

  2. we need to set Access-Control-Allow-Origin header in the service 

1.In the service specify the Access control header.

$.response.headers.set("Access-Control-Allow-Origin", "*");
$.response.status = $.net.http.OK;

2. In the all let simplify the call and tell that we will make a cors call.

	$.ajax({
			type: "POST",
			url: url,
			dataType: "json",
			crossDomain: true,
			data: JSON.stringify(myEventList),
			success: function(result) {
				
			},
			error: function(response) {
						}
		});

And thus what’s coming in header now ? let’s have a look.

Response Headers Now :: 

 

good to go, we fixed CORS.

If you are wondering how can i make a call without Username and password. I made a anonymous  call . You can refer here for more details over it . :https://blogs.sap.com/2014/07/23/anonymous-call-to-access-xsjs-service-using-sqlcc/

 

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

    1. Gopal Anand Post author

      HI  Gowthami ,

      I am making a script that can be embedded in any application i.e UI5 or Fiori or any JS supported application. They Can be On-premise or cloud.From the script we need to read some data and send it to our HANA DB.

      I wanted to reduce the effort made to create destination and then changing the neo-app then more coding specific to the script to call the destination.(coding level efforts) 

      Why to do those stuff if the need was only to make call to same service from any application which is in production.  

      Thus i didn’t used destination.

      (1) 

Leave a Reply