How to use an API with an app Fiori (SAPUI5)

Question

I am trying to use this Mercedes Benz API in my app. Inside controller I have a ajax request:

    onInit : function () {
        var oModel = new JSONModel();
        var url = 'https://api.mercedes-benz.com/image/v1/vehicles/WDDZH3HB8JA394212/components?apikey=my_apikey';

        $.ajax({
            beforeSend: function() {
                //armamos la url y la asignamos a una var       
            },
            url: url,
            type: 'GET',
            accepts: "application/json",
            success: function (resp) {
                console.log(resp)
            },
            error: function (jqXHR, estado, error) {
                console.log(error +":" + " " + estado)
            },
            timeout: 10000
        });
    },

I just want response as OK but getting some error:

Request header field X-XHR-Logon is not allowed by Access-Control-Allow-Headers in preflight response.

Responses

If you take a look to the documentation API I just need the API key. Maybe I am doing something wrong? Guide me if you has use an API inside a FIORI app it will be thankful

NOTE: my fiori server is on premise so we don't use SCP

if you put a debugger statement in the beforeSend event, can you see x-xhr-logon in the headers of the request? — Jorg
you know of destinations in SAP cloud platform? help.sap.com/viewer/cca91383641e40ffbe03bdc78f00f681/Cloud/… You can fix this issue by having a destination created to the URL you are trying to call — Nandan Chaturvedi
@Jorg i put a break but where can i see that ? this is my first time that i use ajax :C maybe there is another way — Naoto
replace //armamos la url y la asignamos a una var with debugger;, and add an import parameter to the function: beforeSend: function(request). Then open the console of the browser. Chrome will stop and you can check the values of request, in a similar way to SE80. Check the Sources tab. — Jorg

dotchuZ dotchuZ · Accepted Answer · 2018-09-25T06:32:37

If you really want to do an XHR you need to whitelist APIKEY in neo-app.json like this

{
    "welcomeFile": "/webapp/index.html",
    "routes": [{
        ...
    ],
    "sendWelcomeFileRedirect": true,
    "headerWhiteList": [
        "APIKey"
    ]
}

Otherwise I strictly recommend using destinations, explained in here:

SAPUI5 / AJAX, submitting Basic Authentication Details (solved)
Authentication API in SAPUI5 without SAP Cloud Platform and Destinations (not solved)

How to use an API with an app Fiori (SAPUI5)

1 Answers