This question is based on an issue I had before but never managed to resolve.

I'm running an userscript via FireMonkey which regulary sends requests to my backend server, those using CORS since they are cross-domain. For testing purposes my response headers are currently set very loosely backend-side:

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Method: POST");
header("Access-Control-Allow-Headers: *");

Frontend-side my requests are sent via jQuery AJAX, looking roughly like this:

$.ajax({
    method: "POST",
    url: this.queryURL,
    timeout: this.timeout,
    data: this.formData,
    processData: false,
    contentType: false,
    success: onSuccess,
    error: onError
});

Nothing special here, requests have been working fine ever since.

I want to get rid of jQuery now and use native XmlHttpRequest instead. The implementation looks like this:

const xhr = new XMLHttpRequest();
xhr.open("POST", this.queryURL);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.timeout = this.timeout;
xhr.ontimeout = onTimeout;
xhr.onreadystatechange = () => {
    if (xhr.readyState !== 4 || xhr.status === 0)
        return;

    if (xhr.status !== 200)
        onError(xhr);
    else
        onSuccess(xhr.responseText);
};
xhr.send(this.formData);

For some reason the requests seem not to be sent anymore on Firefox, at least the network tab doesn't show any. Testing it on Chrome it still works, but I figured that the issue might have something to do with preflight requests, since I noticed something strange:

With jQuery AJAX:

With native XHR:

Using native XHR, Chrome seems to always have a first preflight request failing, with a second one being successful. This doesn't happen with AJAX. Not sure if this is helpful in any way, but could this explain why requests keep failing at all in Firefox, and how to resolve it?