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/