As more and more SAP Folks are joining AppGyver I see that we are all struggling with the Cross-origin resource sharing. After trying to find a solution for a long time, a blog post about AppGyver in SAP Blogs helped me out. I decided to prepare a step by step guide here on AppGyver.
In this tutorial we will cover how we can overcome the CORS using SAP API Management. Obviously, CORS issue is not only related with SAP Applications and SAP APIM is one of the many tools to solve this issue.
What is CORS?
Cross-origin resource sharing (CORS) protects your backend by allowing only the allowed domains to access your system. When you’re trying to access an when you’re making a request from here, platform.appgyver.com is requesting to access your system. Since this platform is unknown to your backend, the system returns an error.
Question: How can I access my SAP Application without getting CORS error?
Answer: Unless your backend has CORS support (i.e. whitelisting) you should use an API Proxy.
Prerequisites
You should have access to SAP BTP. Trial available here.
You should add Integration Suite to your BTP Account. Follow this tutorial to learn how.
Creating an API Proxy
As a C4C Consultant, I’ll be using C4CODATAAPI to access my backend.
Open APIM and Click Discover, then search for your solution.
Select the service that you’d like to use and click on Copy. Add your domain or if you’d just like to tag along with me, use SAP’s sandbox api (get your apikey from API Business Hub).
Alternatively, if you can’t find your solution or want to build it from scratch, you can go to Develop and click Create
Handling CORS
To deal with CORS, you need to make a preflight call with OPTIONS and set the relevant headers.
Open your API Details and Click Edit. Go Proxy EndPoint tab and delete the default route rule.
Then add the rules as you see below. Note that the noroutes should be on top.
"Route Rule Name:" noroutes
"Route Rule Condition:" request.verb == "OPTIONS"
After adding the rules, click on Policies
In Flows → ProxyEndpoint click Add (+) and add the following flow
"Flow Name:" preflight
"Condition String:" request.verb == "OPTIONS"
Click on ProxyEndpoint → PostFlow. From the policies on the right side, select Assign Message. Stream should be Outgoing.
Paste the following code to the script.
Note: In “Access-Control-Allow-Headers” I have added “authorization” header. If you’re planning to use API Keys, add “apikey” to the allowed headers. Basically add any necessary headers that you need to pass.
<!-- This policy can be used to create or modify the standard HTTP request and response messages -->
<AssignMessage async="false" continueOnError="false" enabled="true" xmlns='http://www.sap.com/apimgmt'>
<Add>
<Headers>
<Header name="Access-Control-Allow-Origin">*</Header>
<Header name="Access-Control-Allow-Headers">set-cookie, origin, accept, maxdataserviceversion, x-csrf-token, authorization, dataserviceversion, accept-language, x-http-method, content-type, X-Requested-With</Header>
<Header name="Access-Control-Max-Age">3628800</Header>
<Header name="Access-Control-Allow-Methods">GET, PUT, POST, DELETE</Header>
<Header name="Access-Control-Expose-Headers">set-cookie, x-csrf-token, x-http-method</Header>
</Headers>
</Add>
<IgnoreUnresolvedVariables>false</IgnoreUnresolvedVariables>
<AssignTo createNew="false" type="response">response</AssignTo>
</AssignMessage>
Click on Update
Save and Deploy your API.
Now let’s test our API. Copy your API Proxy URL. Open AppGyver and Click on Data and add a Data Resource. You can both use REST API and OData Integration. To keep it short, let’s use OData Integration
Paste your API Proxy Link and Click Verify
Save the Data Resources that you want. That’s it!
Note: Do not save them all as it is causing serious performance issues. Only activate the ones you really need and will regularly use in different pages or with different cases. In case you need a simple call that you only going to use in one page, use HTTP Request Flow instead.
You can access the detailed SAP Guide from here.
