I need to customize request headers for my ajax POST calls, but I'm facing some challenges due to the framework I am using (ZK). I can only set the request headers by overriding certain functions. This is what I have done:
var zk_native_function_to_instanciate_a_xhr_OLD = zk_native_function_to_instanciate_a_xhr();
zk_native_function_to_instanciate_a_xhr = function() {
var xhr = zk_native_function_to_instanciate_a_xhr_OLD ();
xhr.onloadstart = function () {
if (xhr.readyState === 1) {
xhr.setRequestHeader("XX-MY-CUSTOM-HEADER", "foobarhimself");
}
}
};
This setup works fine in Chrome, but it doesn't work as expected in Firefox. When debugging in Firefox, I noticed that the ready state changes too quickly from 1 to 4 when reaching the 'if' line compared to Chrome.
Even though both browsers return an instance of XMLHttpRequest object from
zk_native_function_to_create_a_xhr_OLD()When trying to remove the breakpoint on Firebug, I encountered an error message saying 'InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable'. It appears that this is happening because the readyState is already at 4 by the time xhr.setRequestHeader() is called.
Can anyone suggest a solution to this issue? Is there another way to call xhr.setRequestHeader() or modify the event handlers?
Thank you for your help!