How to add a custom header field to http request in SAP WEB IDE UI5 App?

[former_member615578]

Hello,

I want to consume a webservice in my SAPUI5 app. This service is require a custom header field in HttpRequest to process business. I've already configured a destination for webservice and used XMLHttpRequest to send request. the following are my javascript UI5 code:

var xhr = new XMLHttpRequest(); 
xhr.withCredentials = true; 
xhr.open("POST", "/myDestinationPath/myWebService", true); 
xhr.setRequestHeader("Content-Type", "application/json"); 
xhr.setRequestHeader("myCustomHeader", "customHeaderValue"); 
xhr.send(JSON.stringify(myBodyData));

My Issue is:

My webservice didn't get custom header field in HttpRequest that was sent from my UI5 app.

(I have used Fetch API and ajax but had the same issue)

So are there any solutions for this problem ?

Thank you for your help !

[viswateja1992]

Hi Thang Bui,

Add your custom header in Neo-app.json.

"headerWhiteList": ["customHeaderName"]

Regards,

Viswa

[former_member615578]

Thank you for your help! I got it.

[abdel_dadouche]

Hi thangbui

Please find below a link to a tutorial that shows how to implement the headerWhiteList in a SAPUI5 app:

https://developers.sap.com/croatia/tutorials/ml-fs-sapui5-series-changepoint-detection.html#d984a1fc...

This feature is described here:

https://help.sap.com/viewer/65de2977205c403bbc107264b8eccf4b/Cloud/en-US/df89d9cd06a84905a3a4747f102...

Any reason you are using XHR and not AJAX? Just curious

[former_member615578]

Thank you for your help! I got it.

[former_member615578]

”Any reason you are using XHR and not AJAX? Just curious”

The above code is just an example. I have tried some ways (Fetch, XHR and AJAX). But currently, I don't know what way is best practice in SAPUI5. Coud you let me know? ( I have not had much experience about SAPUI5/Javascript).

Thank you for your help!

[abdel_dadouche]

I don't think there is a "best practice for SAPUI5" with regards to calling API.

XHR is really raw level compared to jQuery AJAX or other higher level JavaScript APIs to call REST APIs.

Some developers tends to prefer simpler or higher level API as much as some developers tends to prefer using raw level API and have more control.

There is something for sure jQuery APIs use XHR in the back with added functionalities that you won't need to code yourself, but there is small overhead cost to using it.