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

Answer 1

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)