Converting ajax Post query to XHR results on 415 http code : <p>I had an issue with ajax to download files, I was told that using XhmlHttpRequest (XHR) will help resolve the issue, so I m trying to convert my old ajax rest request to a new xhr rest request</p>

<p>Unfortunatly I m not yet successfull, I m getting 415 http error code which indicates an unsuported media type <code>req.send(JSON.stringify(printData));</code> and chrome is highlihgting this par of my code which will be presented below. </p>

<p>Here is My ajax call</p>

<pre><code>var jsonData = JSON.parse(JSON.stringify(printData));
                var settings = {
                    "async": true,
                    "crossDomain": true,
                    "url": "http://" + document.location.host + "/facturation/print/client",
                    "method": "POST",
                    "headers": {
                        "cache-control": "no-cache",
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    "processData": false,
                    "contentType": "application/json",
                    xhrFields: {
                        responseType: 'blob'
                    },
                    "dataType": "text",
                    "data": JSON.stringify(printData)
                }

                $.ajax(settings).done(function(response, status, xhr) {
                    console.log(response);
                    var filename = "";
                    var disposition = xhr.getResponseHeader('Content-Disposition');

                    if (disposition) {
                        var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                        var matches = filenameRegex.exec(disposition);
                        if (matches !== null &amp;&amp; matches[1]) filename = matches[1].replace(/['"]/g, '');
                    }
                    var linkelem = document.createElement('a');
                    try {
                        var blob = new Blob([response], {
                            type: 'application/octet-stream'
                        });

                        if (typeof window.navigator.msSaveBlob !== 'undefined') {
                            //   IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
                            window.navigator.msSaveBlob(blob, filename);
                        } else {
                            var URL = window.URL || window.webkitURL;
                            var downloadUrl = URL.createObjectURL(blob);

                            if (filename) {
                                // use HTML5 a[download] attribute to specify filename
                                var a = document.createElement("a");

                                // safari doesn't support this yet
                                if (typeof a.download === 'undefined') {
                                    window.location = downloadUrl;
                                } else {
                                    a.href = downloadUrl;
                                    a.download = filename;
                                    document.body.appendChild(a);
                                    a.target = "_blank";
                                    a.click();
                                }
                            } else {
                                window.location = downloadUrl;
                            }
                        }

                    } catch (ex) {
                        console.log(ex);
                    }
                })
</code></pre>

<p>What I tried using XHR is a s below</p>

<pre><code>        var req = new XMLHttpRequest();
        req.open("POST", "http://" + document.location.host + "/facturation/print/client", true);
        req.responseType = "blob";
        req.setRequestHeader("cache-control", "no-cache");
        req.setRequestHeader("contentType", "application/json");
        req.setRequestHeader("dataType", "text");
        req.setRequestHeader("X-CSRF-TOKEN", $('meta[name="csrf-token"]').attr('content'));

        req.onload = function(event) {
            var blob = req.response;
            console.log(blob.size);
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = "Dossier_" + new Date() + ".pdf";
            link.click();
        };

        req.send(JSON.stringify(printData));
</code></pre>

<p>What should I do to make this work ?</p>
