SAPUI5 / AJAX, submitting Basic Authentication Det

Question

I'm trying to access a SAP Successfactors API from an AJAX Call in a SAPUI5 application.

I can access the API fine using POSTMAN, and providing the Basic Authentication credentials.

How do I supply these credentials directly in AJAX. I've tried numerous ways from numerous post but no method seems to work.

Response from Google Dev Tools (Console Tab)

Failed to load https://api2.successfactors.eu/odata/v2/PerPerson?$select=personId: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://webidetesting#####-#####.dispatcher.hana.ondemand.com' is therefore not allowed access.

Response from Google Dev Tools (Network Tab)

Authentication credentials are required. Please provide a valid username, password and company id

Ajax.

var aData = jQuery.ajax({
                type: "GET",
                contentType: "application/json",
                crossDomain: true,
                url: "https://api2.successfactors.eu/odata/v2/PerPerson?$select=personId",
                xhrFields: {
                    withCredentials: true
                },
                beforeSend: function (req) {
                    req.setRequestHeader('Authorization', 'Basic ' + btoa('Username:Password'));
                    req.setRequestHeader('Access-Control-Allow-Origin', '*');
                },
                headers: {
                    "Authorization": "Basic " + btoa("Username" + ":" + "Password"),
                    "Access-Control-Allow-Origin": "*"
                },
                username: "Username",
                password: "Password",
                dataType: "json",
                async: false,
                success: function (data, textStatus, jqXHR) {
                    oModel.setData({
                        modelData: data
                    });
                    alert("success to post");
                },
                error: function (oError) {
                    console.log(oError);
                }

            });

Answer 1

The answer was simply to create a DESTINATION with NO authentication and apply all the authorization in AJAX

Answer 2

An SCP Destination is the answer in this case, but what if there are 2 calls, one to an authentication API (to retrieve a token) and another to the GET API (using the retrieved token as authentication ?)

Answer 3

The following issues might be the problem:

1) Is Username of Type: USERNAME@COMPANY:PASSWORD before sent?

2) Endpoint URL should be according to your data center, maybe DC2 is correct, but could also be DC12 ? https://api12.successfactors.eu/odata/v2/PerPerson?$select=personId instead of https://api2.successfactors.eu/odata/v2/PerPerson?$select=personId

3) Pass a reference to your success function

var that = this;

....
success: function (data, textStatus, jqXHR) {
     var oModel = that.getView().getModel(); // get your model, instatiated outside this method
     oModel.setData({
        modelData: data
     });
     alert("success to post");
},
     error: function (oError) {
        console.log(oError);
}
....

4) Working with SAP Cloud Platform the right way to avoid cross-origin problems!

Destination (Connectivity -> Destinations) in SAP CP:

Don't forget to check the connection and receive HTTP status code = 200!

Name: sap_hcmcloud_core_odata, 
Type: HTTP
URL:  https://api12preview.sapsf.eu
Auth: Internet, Basic Authentication
  Your User (Username@Company), 
  Your Password
Properties  
  WebIDEEnabled = true
  WebIDESystem = SFSF
  WebIDEUsage = odata_gen

neo-app.json add a route:

{ "path": "/sf-dest",
    "target": {
        "type": "destination",
        "name": "sap_hcmcloud_core_odata"
    },
    "description": "SFSF Connection"
}

in your controller

sap.ui.define([
"sap/ui/core/mvc/Controller"], function (Controller) {
"use strict";

return Controller.extend("yourNamespace.yourAppName.controller.Main", {
    onInit: function () {
        var oModel = new sap.ui.model.json.JSONModel();
        var sHeaders = {
            "Content-Type": "application/json",
            "Accept": "application/json",
        };

        //sending request
        oModel.loadData("/sf-dest/odata/v2/PerPerson?$select=personId", null, true, "GET", null, false, sHeaders);
        console.log(oModel);

    }
});
});