What to do if you encounter cross-domain issues with JavaScript to access services on the SAP cloud Platform

There are too many resources on the web to discuss the cross domain problem of JavaScript. The domestic program ape wrote a lot of excellent articles, Jerry here will not repeat.

Straight into the topic, I was working on a prototype recently: Exposing the ABAP function module stfc_connection on the on-premise system through SAP Cloud Platform and SAP cloud connector to consumption.

The logic of this function module is simple, and the input parameter Requtext content is not processed directly, and the output parameter echotext is copied.

Detailed procedure refer to my public article: using the JAVA+SAP Cloud Platform +SAP Cloud Connector invoke functions in the ABAP on-premise system

After deploying to the SAP Cloud Platform, the call is made via the following API endpoint:

https://demoi042416trial.hanatrial.ondemand.com/connectivity/api?userinput=

Then make the following Ajax call on my messaging server to consume (because it is a POC, so put the API endpoint hard coded on line 3rd):

An expected cross-domain error was encountered: No ' Access-control-allow-origin ' header was present on the requested resource.

How to solve?

Solution 1:cross-origin Resource Sharing

If the server-side response can be affected by programming or configuration, you can add fields to the HTTP response structure with the help of cross-origin Resource sharing Access-control-allow-origin , whose content is assigned to the Origin field required by the actual business. The origin of this place in Jerry's view is a white list.

Solution Reference My Blog:

Cross domain request in ABAP and Java

https://blogs.sap.com/2017/05/06/cross-domain-request-in-abap-and-java-with-two-workaround/

Solution 2:jsonp

Cross-domain problems can also be solved with JSONP, but this approach also requires some programmatic processing on the server side. Refer to my blog for specific usage:

Play around with JSONP in NodeJS server and ABAP server

https://blogs.sap.com/2017/06/04/play-around-with-jsonp-in-nodejs-server-and-abap-server/

And I use the SAP Cloud Platform plus cloud connector to expose the function module on the on premise to the public, which means developers can't program or configure the HTTP response headers. So Jsonp is not helpful for my prototype development to solve cross-domain problems.

There is a corresponding cross Domain access parameter configuration in the mobile Service for development and Operations cockpit of the SAP cloud Platform. However, my prototype development does not use the SAP Cloud Platform Mobile service architecture, and therefore does not apply.

Solution 3: Self-developed proxyservlet

What happens next? Jerry used to do CRM Fiori development, using the Eclipse IDE, a local tomcat, running on the Fiori application can also be accessed through the domain of localhost to the on-premise system domain OData service. How can I not encounter cross-domain problems at that time? After a careful recall, we also deployed a proxy Servlet on our tomcat server. The AJAX request sent by Index.html is Proxyservlet intercepted by Proxyservlet, which initiates a request to the On-premise system through Java code. After the request is answered, Proxyservlet sends it to index.html again.

The principle of this type of servlet is described in detail in my blog post:

Explore the Com.sap.ui5.resource.ResourceServlet

https://blogs.sap.com/2014/12/04/explore-the-comsapui5resourceresourceservlet/

Once the idea is clear, it's easy to write code. The source code for the corresponding Java Web project is on my github:

Https://github.com/i042416/SCPCrossDomainSolution

1. The AJAX request sent in Index.html actually points to the processor Proxyservlet: note The proxyin the request URL path of the third line.

2. Develop a proxyservlet to intercept those requests that contain proxies in the URL path. Back to my prototype development requirements, API consumption on the SAP cloud Platform is now implemented through Proxyservlet, and for simplicity I've hardcoded the API endpoint in Proxyservlet.

Tested to work as expected: The AJAX request of domain localhost can successfully access the API on the SAP Cloud Platform:

After I finished my search on Google, I found out that SAP has released a standard proxy project on GitHub to handle the cross-domain access of JavaScript, and it's interesting to know:

Https://github.com/SAP/cloud-connectivityproxy

Read more

• Invoke functions in the ABAP on-premise system using Java + SAP Cloud Platform + SAP Cloud Connector

• Use JDBC to operate the Hana database on the SAP cloud Platform

• Use Java programs to consume SAP Leonardo's machine learning API

• C4C and Integration Series tutorials

To get more original Jerry's technical articles, please follow the public number "Wang Zixi" or scan the QR code below:

What to do if you encounter cross-domain issues with JavaScript to access services on the SAP cloud Platform