XMLHttpRequest to Microsoft Graph API aborted in IE 11

Question

I am using the following code to upload a large file (but less than 62MB) to OneDrive using Microsoft Graph API.

let req = new XMLHttpRequest();
req.open("PUT", url, true);
req.setRequestHeader("Authorization", "Bearer " + this.authProvider.tokens.graph);
req.setRequestHeader("Content-Length", file.size.toString());
req.setRequestHeader("Content-Range", "bytes 0-" + (file.size - 1).toString() + "/" + file.size.toString() );
req.upload.onprogress = (e) => {
    let progress = Math.floor(e.loaded / e.total * 100);
    console.log(progress);
};
req.upload.onerror = (e: any) => {
    console.log("error");
};
req.onload = (e) => {
    console.log("done");
};
req.send(buffer);

This is going through fine from Chrome (latest version to date) but after creating the session, the upload is failing on the returned url from the create session request. I get the error SCRIPT7002: XMLHttpRequest: Network Error 0x80070005, Access is denied. in IE 11 console and in the network tab I see the request status being aborted and the initiator was a CORS Preflight request. According to other tests I think the error originates from req.open("PUT", url, true); line.

-Update-

Its actually the Pre-flight CORS (OPTIONS) request to the returned URL that is actually failing which gets through in Chrome just fine.

Answer 1

The problem might be that you're setting the Content-Length header. You shouldn't set that header explicitly here (and in any case, it's intended to be just the length of the current request, not the length of the whole file).

While this sounds arbitrary, I have a theory as to what's going on, but I'm not able to test it right now. My theory is that IE is failing the CORS preflight because the server doesn't explicitly advertise Content-Length as an allowed header (because it's in the set of default headers that are always allowed). IE is probably doing an explicit check against the headers you're trying to send vs. what the CORS preflight returned in its allow list.

You should stop setting the Content-Length header regardless, and hopefully that fixes your problem, too. If not, let me know and I'll dig in more.