No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin is therefore not allowed access

Question

I am checking whether a particular URL is currently up or not, by adding a HTTP GET functionality to a button in my UI5 application.

For this, the code is as below:

        _onButtonPress: function () {
    
         var xhr = new XMLHttpRequest();
    
        xhr.open('GET', this.getView().byId("sap_Responsive_Page_0-content-sap_ui_layout_form_SimpleForm-1476966827717-content-sap_m_Input-1476966871600").getValue(), true);
        xhr.send();
        xhr.onreadystatechange = processRequest;
        function processRequest(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
    var response = (xhr.responseText);
    alert(response);    }
}},

For the URL input, we are using HTTPS requests only.

But when I put a value for the URL and test the button, I get:

XMLHttpRequest cannot load https://my3XXXXXXX6.sapbydesign.com/sap/byd/runtime/(entered URL). No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://application browser url' is therefore not allowed access.

The idea is to check the status of URL and set the status state from the URL status.

How can I prevent this from happening?

Br Suraj N

Answer 1

This is browser protection against a class of attacks called Cross-Site Request Forgeries.

As explained in the error message, you cannot get this to work unless the linked website (in this case https://my3****6.sapbydesign.com/sap/byd/runtime/) adds an appropriate Access-Control-Allow-Origin header to its response.

Answer 2

The problem is happening because you App (the one that is Starting the get) is hosted in domain A and the service is hosted in domain B. For security reasons, browsers won't let you do that.

One way to fix it is getting the server to allow certain Http verbs from your domains. But if you are not in control of the server side you won't be able To do that.

Another way is to create a proxy server on your end and configure it to relay all the requests to the original server you were intending to issue the get request.

Then on your original app you issue the get to your proxy server.

You can do that directly in eclipse: http://help.sap.com/saphelp_nw74/helpdata/de/2d/3f5fb63a2f4090942375df80abc39f/content.htm

Or you can start a proxy on node as well:

https://www.npmjs.com/package/gulp-connect-proxy