How to overcome CORS error while connecting SAP AppGyver to SAP Business Technology Platform or SAP S/4HANA – Application Router approach.
I am a developer at SAP Labs India. I have used SAP AppGyver as the frontend for an application and have connected it to SAP Business Technology Platform services and SAP S/4HANA APIs.
I observed that CORS (Cross Origin Resource Sharing) error is one of the blockers to achieve this integration. This error occurs as SAP AppGyver runs on a different domain (*.appgyver.black)
However, I could not find a single source of information with the steps to overcome the CORS error for this particular integration using the AppRouter approach. Hence, I thought of writing down the steps here so that people who face similar issues can find the list of steps to be followed in one single place and overcome the CORS error quickly.
Please note, the steps to be followed requires use of SAP Cloud Connector and AppRouter. The details of these components are well explained independently in multiple web resources, I have tried to put things together in this blog in the context of integrating SAP AppGyver to SAP Business Technology Platform and SAP S/4HANA.
Following are the steps that can be performed to overcome CORS error in SAP AppGyver while connecting to a service in SAP Business Technology Platform or SAP S/4HANA system.
- If you want to connect SAP AppGyver with an OData service available in a SAP S/4HANA system which is not accessible publicly:
Connect your SAP Cloud Connector to your SAP Business Technology Platform subaccount and then add a mapping to the SAP S/4HANA on-premise system.
Reference from SAP press: https://blog.sap-press.com/15-steps-to-setting-up-sap-cloud-connector
Skip to step 2 directly if your requirement is not to connect SAP AppGyver to SAP S/4HANA system.
- Create a destination in your SAP Business Technology Platform subaccount (to connect to OData service configured in the above step or to any SAP Business Technology Platform service or to any of your own service running on SAP Business Technology Platform) and test the connection.
Reference (to create destination in SAP Business Technology Platform and to create AppRouter module) : https://www.youtube.com/watch?v=0zzFCfuUIbs&list=PLgjSQOWovufe-JG1WFZUuf_uvnOdHKDox&index=8
Thanks to Marius Obert for this wonderful video.
- Create an AppRouter module with following CORS specific configuration in ‘xs-app.json’ file and deploy it to onto SAP Business Technology Platform.
- Connect to the AppRouter url from SAP AppGyver, you should now be able to access the resource from SAP AppGyver domain without CORS error.
I hope this helps you on your SAP AppGyver journey. All the best!