has been blocked by CORS policy: Request header field x-xhr-logon is not allowed by Access-Control-Allow-Headers in preflight response - sapui5

Question

I am trying to consume external restful web service in sap ui5. When I consume the same in fiori launchpad it throws below error in cosole and no data comes in the tile app. How can I over come with that? I have checked many blogs relted to that but didn't get any help from that.
Error :
Access to XMLHttpRequest at 'https://api.myjson.com/bins/ijyy2' from origin 'url2' has been blocked by CORS policy: Request header field x-xhr-logon is not allowed by Access-Control-Allow-Headers in preflight response.
Note : url2= https://sapmobile.mycompanyname.com is nothing but our fiori
launchpad url.

Answer 1

This is a known Fiori Launchpad problem. There is a file abap.js which overrides the default send method of XMLHttpRequest.
If you add the external API as a new destination in the SAP Cloud Platform (or use a Web Dispatcher in an on-premise environment) then there will be no more CORS calls and thus no more CORS problems.
If you want a pure JavaScript solution you can restore the original implementation with two functions. Add these to your controller.
Call the following immediately before accessing your external API
_overrideRequestPrototype: function () {
if (!XMLHttpRequest._SAP_ENHANCED) {
return;
}
this.__send = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function (oBody) {
let oChannel = {};
this._checkEventSubscriptions();
try {
oChannel = this._channel;
this._saveParams(oBody);
this._send(oBody);
if (oChannel) {
oChannel.sent();
}
} catch (oError) {
if (oChannel) {
oChannel["catch"](oError);
} else {
throw oError;
}
}
};
}
After the call, restore the SAP code with the following function:
_restoreRequestPrototype: function () {
if (!XMLHttpRequest._SAP_ENHANCED) {
return;
}
XMLHttpRequest.prototype.send = this.__send;
}