How to get rid of: “No ‘Access-Control-Allow-Origin’ header is present on the requested resource.” in Chrome browser.
If you are working with SAPUI5/OpenUI5, sooner or later you will come across “No ‘Access-Control-Allow-Origin’ header is present on the requested resource.” This article explains when you get this error and how to resolve it the easiest way particularly for Chrome Browser.
Applies to: Tested for a simple SAPUI5/OpenUI5 desktop App but applies to 7.31, 7.4 versions etc.
Prerequisites
No stringent pre-requisites. This article may be helpful or beginners to experts alike.
Outcome
You will be able to get rid of No “‘Access-Control-Allow-Origin’ header is present on the requested resource.” in Chrome browser
Problem
An application with seemingly correct code does not run properly in the chrome browser. Inspection in F12 developer tools reflects the following error –
Access-Control-Allow-Origin’ header is present on the requested resource.
While the expected output is –
In Internet Explorer it warns you but lets you run the application if you accept the risk and chose to allow blocked content-
When you chose to run the app allowing blocked content it runs –
Resolution
This error message in Chrome Browser means that some parts of your application do not have the same origin which looks suspicious and to alert and block, malicious (cross-site) attempt to access productive applications or steal some data from them. You might face this error when your application code is perfectly alright. I got this error in Chrome while trying to run a very simple application. At the same time Internet Explorer ran the application without a problem.
We need to tell the browser programmatically in http headers that content from different servers is not a problem and we are doing it on purpose.
There are different ways to achieve the same.
Resolution Option 1
Start the Chrome browser from command prompt with a flag to ignore cross-site content
E.g ‘path to your chrome installation\chrome.exe –allow-file-access-from-files’
Surprisingly for my current application this option did not help.
Resolution Option 2
Add the Chrome addon from the following link –
Allow-Control-Allow-Origin: * – Chrome Web Store
Once added to Chrome, just toggle the switch where the switch turns blue and the button above turns green.
After this step, just run your application as you were trying to do earlier and it should run just fine.
Resolution Confirmation
Enjoy your application working !
Code for simulating the above scenario
(just copy paste the given code in a text file with .html extension and run it with IE or Chrome)
<!DOCTYPE HTML>
<html>
<meta http-equiv=”X-UA-Compatible” content=”IE-edge”>
<meta charset=”UTF-8″>
<head>
<title>MY SAPUI5 APP</title>
<script src=”https://sapui5.hana.ondemand.com/resources/sap-ui-core.js“
id=”sap-ui-bootstrap”
data-sap-ui-libs=”sap.ui.commons, sap.ui.table, sap.ui.ux3″
data-sap-ui-theme=”sap_corbu”>
</script>
<script>
var oShell = sap.ui.ux3.Shell({
appTitle: “MY SAPUI5 APP”,
showLogoutButton:true,
showSearchTool:true,
showFeederTool:true
});
oShell.placeAt(“app”);
</script>
</head>
<body id=”app” class=”sapUiBody” role=”application”>
</body>
</html>
A note for the readers
Please do rate the document and let me know views on the content of the document and terminology used. I will be happy to revise the document to accomodate your suggestions.
A very helpful post .. (specially for beginners) 🙂
Hi. We tried both Resolution Options but still we are getting same error. please let me know if there is any other solutions ?
Hi Akshay,
I do understand that you have a problem and its not solved but you have not given me anything to look into your problem. Some more description, screenshots etc really help people help you.
The article above simulates the problem when loading the libarary files:
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"...
My guess is that your problem might be caused during calling the OData service, which is usually solved by using "proxy/http/...." in place of "http://...." as OData service URL.
For example :
"proxy/http/services.odata.org/Northwind/Northwind.svc"
in place of
"http://services.odata.org/Northwind/Northwind.svc"
If this is not the case, please share your Chrome console output here, also raise a question in Forums with a elaborate problem description and screenshots to involve the whole UI5 community.
Regards,
AG.
Sometimes even after option 1 and 2 above Chrome Browser still has this same issue. Only way to get rid of it is to upload the application to SAP following the blog below and execute the application from SE80.
https://pravin517.wordpress.com/2018/02/06/deploy-a-ui5-application-to-as-abap-using-report-ui5-ui5_repository_load/
Still working, also with Chromium. Found the extension on https://chrome.google.com/webstore/category/extensions
This is happening because of the CORS 3 (Cross Origin Resource Sharing) . For every HTTP request to a domain, the browser attaches any HTTP cookies associated with that domain. This is especially useful for authentication, and setting sessions. You are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request.
JSONP ( JSON with Padding ) is a method commonly used to bypass the cross-domain policies in web browsers. You’re on domain example.com, and you want to make a request to domain example.nett . To do so, you need to cross domain boundaries. JSONP is really a simple trick to overcome the XMLHttpRequest same domain policy. So, instead of using XMLHttpRequest we have to use < script > HTML tags, the ones you usually use to load JavaScript files , in order for JavaScript to get data from another domain.
Localhost
If you need to enable CORS on the server in case of localhost, you need to have the following on request header.
Access-Control-Allow-Origin: http://localhost:9999
Also, this kind of trouble is now partially solved simply by using the following jQuery instruction:
<script>
$.support.cors = true;
</script>