Skip to Content
Technical Articles

CORS (cross origin resource sharing) Issue Resolved

I hope If you have reached here, You might have some idea about CORS by now.

If you don’t want to read through: just allow your backend to accept CORS request.

While working on UI5, if we want to call an oData, rest, or XSJS service. It is suggested to set a destination in our Cloud Platform cockpit and 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. Maybe you are building a POC or any quick project which doesn’t require much security.

What happens when we make a GET or POST something from a different hardcoded URL.

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

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 some header that will tell that yes we can allow cross-origin calls for this service/resource. Here the resource is your backend/api.

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

There are chrome plugins that you can use but they are unsafe. if you debug the requests you can see that your requests are going through a server hosted by the plugin, Basically, you are sending all data to that server and you don’t what they can do with it.

How to fix it. 

  1. We need to set the “Access-Control-Allow-Origin” header in the service. (As the request is rejected by service(your backend), you need to allow it from there.

  2. We need to tell our ajax call that we are making a cross-origin call. (in extreme cases it might be required)

1. In the service specify the Access control header.

  • In XSJS you can do the following changes:
$.response.headers.set("Access-Control-Allow-Origin", "*");
$.response.status = $.net.http.OK;
  • If you are using node.js as your backend service you can use cors package in your express server.
const cors = require("cors");
app.use(cors());
  • If you are using Java as your backend, you can use the following tutorial(I’m not a java person but the tutorial provided works.)

https://howtodoinjava.com/spring5/webmvc/spring-mvc-cors-configuration/

 

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

	$.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 the 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 an 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/

 

7 Comments
You must be Logged on to comment or reply to a post.
    • 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.

  • Hi Gopal,

    I have a question regarding the step1

    1.In the service specify the Access control header.

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

    This piece of code you wrote is on Server side or Client side?

    If I just create a UI5 application and want to call some service under CORS, but I am not able to change anything in server, can I use your solution?

    Thanks for your input in advance!

    Best regards

    Sirui