Skip to Content
Technical Articles
Author's profile photo Sreanik Dhanya Kumar
Sreanik Dhanya Kumar
April 15, 2022 1 minute read

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.

  1. 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.
  2. 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.
  3. Create an AppRouter module with following CORS specific configuration in ‘xs-app.json’ file and deploy it to onto SAP Business Technology Platform.
    AppGyver_allow_CORS
  4. 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!

Assigned Tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Akshay Sinha
      Akshay Sinha

      Thanks for this useful blog!

      Author's profile photo John Paul
      John Paul

      Very useful content. Thanks for this.

      Author's profile photo Jai Shankar Shukla
      Jai Shankar Shukla

      Very useful information. Thanks for sharing.

      Author's profile photo longjie jin
      longjie jin

      Hi

      it is very good post and Thanks a lot for your sharing .

      by the way, do you have any sample s4 hana Odata service did configuration test for above.

      I tried few times for s4 hana standard odata service such as RMTSAMPLEFLIGHT_2 for binding in appgyver, looks like the cors error has get passed for above setting, but still can't get positive for odata validation check ?

      Regards,

      LJ

       

       

       

      Author's profile photo Sreanik Dhanya Kumar
      Sreanik Dhanya Kumar
      Blog Post Author

      Hi LJ,

      I had tested it successfully with several APIs available in the SAP API Business Hub.
      For example : Sales Order (A2X) API.

      Thanks and regards,
      Sreanik

      Author's profile photo Fabio Cerioni
      Fabio Cerioni

      Hi Sreanik,

      very good post and it has an original approach!!! I've learned a lot about app router with that.

      I've tried to make it working for update requests.

      I've modified the allowed methods in the xs-app.json adding the PUT method.

                  "allowedMethods": [

                "GET",

                "POST",

                "OPTIONS",

                "PUT" ]

      Unfortunately when I try to test the update method from appgyver I've got CORS error.

      I've found that SAP is requesting the x-csrf-token in the PUT request that appgyver is not able to handle.

      headers

      headers Result

      The only solution that I see should be adding a JS script step in appgyver in order to add an additional request to obtain x-csrf-token (x-csrf-token fetch).

      Perhaps there is an additional solution that I don't see....

      Thanks and regards

      Fabio