XMLHttpRequest() sometimes works and others not

Question

I have a function to do XMLHttpRequest() and randomly works in both Chrome and IE. The function is triggered by On-click. Trying to catch the error the only that I could get is readystate = 4 but status = 0 due the browser rejection. I'll appreciate some help. If I includes the last alert() after req.send , then work better just in IE. This is my function:

<script type="text/javascript">
function getPDF(Inv, agent, ddId, meth, url){
        var invoice = Invoiceid + ".pdf";
        console.log("Start");
        var req = new XMLHttpRequest();
        console.log("opened");
        if ("withCredentials" in req) {
          // req for Chrome/Firefox/Opera/Safari.
           req.open(meth, url, true);
        } else if (typeof XDomainRequest != "undefined") {
         // XDomainRequest for IE.
           req = new XDomainRequest();
           req.open(meth, url);
        } else {
          // CORS not supported.
          req = null;
        }
        req.setRequestHeader("Content-type", "application/json");
        req.setRequestHeader("AGENT", agent);
        req.responseType = "blob";
        req.onload = function (event) {
            var data = event.target.response;
            console.log(req.response);
                var blob = new Blob([data]);
                if (window.navigator.msSaveOrOpenBlob)  // IF IE or Edge
                    window.navigator.msSaveOrOpenBlob(blob,invoice);
                else                                   // All Other Browsers
                {
                    var a = window.document.createElement("a");
                    a.href = window.URL.createObjectURL(blob, {type: "application/pdf"});
                    a.download = invoice ;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);  
                }
        };

        req.onreadystatechange = function (event) {

            if (req.readyState === 4) {  
                if (req.status === 200) {  
                  alert("Open or Save the downloaded file : " + invoice);
                } else {  
                  console.log(req.status);  
                }  
            }  
        }; 
        req.onerror = function (event) {
          console.log("** An error occurred during the transaction");
        };

        req.send(null);
        alert(1); // 

  }
</script>

Answer 1

I'm pretty sure that the issue was with the CORS headers. Unfortunately, I just was developing from the client side and troubleshooting the server side by outside. What I did to fix this issue, I just included an additional header in my http request. :setRequestHeader("Access-Control-Allow-Origin", "8").