XHR doesn't work with API

[aardbol]

Bug Report

I found a condition where API calls don't work properly, but I'm not sure if I can explain it properly. Here goes:

The issue is related to basic authentication and unauthorized responses. Note that this issue is occurring because I'm trying to verify logins by sending an API call to the REST API by setting the username and password in the Basic Authentication header. The issue doesn't seem to be caused by the REST API or the CORS settings.

API calls get aborted every time and even though the response is a 200 with a JSON object, FUI API is not aware of this and always returns xhr.status = 0 and responseobject (the json response) = undefined. It also fails with jQuery, except for when I set the Basic Authentication header in a specific way, which I'll demonstrate.

These calls get aborted:

formElm.api({
    action: "do login",
    beforeSend: function(settings) {
        settings.beforeXHR = function(xhr) {
            xhr.setRequestHeader("Authorization", "Basic " +
                btoa($('[name=email]').val() + ":" + $('[name=password]').val()));
        };
        return settings;
    },
    onComplete: function(response, elm, xhr) {
        alert(xhr.status); // always 0
    }
});

Jquery alternative that also fails:

$.ajax({
    url: "http://localhost:8080/login",
    beforeSend: function(xhr) {
        xhr.setRequestHeader("Authorization", "Basic " + btoa("[email protected]:test"));
    },
    complete: function(xhr, text) {
        alert(xhr.status); // also always 0
    }
});

jQuery alternative that works, because it seems handle 401 responses differently? It's also aware of the response object:

$.ajax({
    url: "http://localhost:8080/login",
    headers: {
        "Authorization": "Basic " + btoa("[email protected]:test")
    },
    complete: function(xhr, text) {
        alert(xhr.status);
        alert(text)
    }
});

Expected result

I'm expecting a xhr.status = 200 when the xhr request succeeded (only if username and password are correct), or a different status code depending on which kind of error occurred, like 401 for unauthorized.

Actual result

xhr.status = 0 and neither jquery or FUI api are aware of the response

Testcase

Not possible due to rest api running locally

Version

2.7.2

[lubber-de]

Looking at the latest relevant jquery 3.4 code (which sets all headers right before calling beforeSend)

https://github.com/jquery/jquery/blob/master/src/ajax.js#L655-L665

I don't see any reason why providing your Basic-Auth headers (either as headers option or set within beforeSend) should make any difference.
Maybe you are using an older version of jquery which probably works different (?)

Anyway, as the FUI docs say

You can pass in any standard jQuery AJAX setting like timeout or contentType to API's settings and it will be automatically passed to the request's AJAX call.

and using the header option was working for you in jquery, you might try using your headers setting in the FUI .api as well

formElm.api({
    action: "do login",
    headers: {
        "Authorization": "Basic " + btoa($('[name=email]').val() + ":" + $('[name=password]').val())
    },
    onComplete: function(response, elm, xhr) {
        alert(xhr.status);
    }
});

[aardbol]

That doesn't work though. It seems like that header is completely ignored, as 401 errors are consistently returned. I verified with the one I posted above.

Using jQuery 3.3.1, but newer versions don't mention any change in this aspect.

I also checked the underlining code, but could't figure out the difference between headers and setRequestHeader() in beforeSend

EDIT:
I found out that your version didn't work because the val() methods aren't being updated with the values of the form elements as soon as I submit the form. That's why I always had to manually set the headers in the beforeSend method, instead of just using the username and password ajax properties.
With jQuery, these data are properly updated though.

[lubber-de]

@aardbol Ah, yes, sure. Using the headers option would immediatly take the .val on api init time, while in beforesend it does it at runtime.
Anyway, as the jquery code does the same either using headers or beforesend (xhr.setRequestHeader) I currently dont know what to do in FUI to solve your issue, as the http response always comes from your backend and FUI is using the jquery ajax functionality so far.
Please try to provide some jsfiddle to reproduce your problem in case there really is something needed to be fixed in FUI.
Maybe the service https://httpstat.us helps to fake your response when preparing a jsfiddle?`

Something like

formElm.
  .api({
    url: 'https://httpstat.us/401'
  })
;

[aardbol]

I tested again with FUI 2.7.5 and this issue isn't happening with it. I think (at first sight) I traced it back to issue #497.

I'll test with the latest version next time before I create a new issue :-)