SAPUi5 – Fighting Same-Origin-Policy with a Proxy-Servlet and the Manifest.json

This blog is facing the Same-Origin-Issue using a proxy servlet when the model is set up by the manifest.json.

Problem-Description 

During development of an mobile Web-Application using SAPUi5 and Eclipse I faced the Same-Origin-Policy when I was trying to consume a remote OData-Webservice – lets say

http://services.odata.org/V3/Northwind/Northwind.svc/

After having a quick look at the SAPUI5 Documentation  https://sapui5.hana.ondemand.com/#/topic/2d3f5fb63a2f4090942375df80abc39f I found out that there is a proxy mechanism to avoid the Same-Origin-Policy for quick and local testing. It states that the exernal URI needs to be extended by an “proxy/” prefix in the coding.  However, it does not work for me since I implemented a global manifest.json and I didn’t know how to exactly extend an external http://hostname/… URI with the proxy/ prefix In the dataSources attribute of the manifest.json. Should it be like

• • proxy/http://hostname/…
  • proxy/http/hostname/…
  • http://hostname/proxy/…

• … 

??? It seems there are to many possible combinations to me. Moreover, it is neccessary to extend the web.xml in the WEB-INF folder. Since I was struggeling around for at least two days I would like to share my solution in the following.

Example for consuming the Northwind-Service 

This Example is based on the SAP Walkthrough tutorial step 26. You can find it and download the source here:

https://sapui5.hana.ondemand.com/#/sample/sap.m.tutorial.walkthrough.26/preview

To avoid the Same-Origin-Issue modify the following files:

Adopting the URI in the manifest.json

{
	"_version": "1.8.0",
	"sap.app": {
		...
		},
		"dataSources": {
			"invoiceRemote": {
			 "uri": "proxy/V3/Northwind/Northwind.svc/", 
				"type": "OData",
				"settings": {
					"odataVersion": "2.0"
...
	},
	
	"sap.ui5": {
		...
		"models": {
			...
			"invoice": {
				"dataSource": "invoiceRemote"
			}
		...
}

It is essential that you don’t have the hostname and the procotol in your URI-String since this will be concatenated by the web.xml as we see in the following:

Activating the Servlet in the WEB-INF/web.xml

<?xml version="1.0" encoding="UTF-8"?>
...
  <servlet>
    <servlet-name>SimpleProxyServlet</servlet-name>
    <servlet-class>com.sap.ui5.proxy.SimpleProxyServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>SimpleProxyServlet</servlet-name>
    <url-pattern>/proxy/*</url-pattern>
  </servlet-mapping>  
  <context-param>
	  <param-name>com.sap.ui5.resource.PREFER_REMOTE_LOCATION</param-name>
	  <param-value>true</param-value>
</context-param>
  <context-param>
          <param-name>com.sap.ui5.proxy.REMOTE_LOCATION</param-name>
          <param-value>http://services.odata.org</param-value>
  </context-param>
  
...

Conclusion

The hostname and the proctol will be declared in the web.xml and thus needs not to be passed to the manifest.json. Moreover, It came out that it is essential to set the context parameter com.sap.ui5.resource.PREFER_REMOTE_LOCATION to true by adding the corresponding XML-Tags to make it work. Otherwise the Framework tries to concatenate the localhost server to the service address. Finally, it could solve my issue.

Greetings from Duesseldorf – Germany