Skip to main content

Hi,


I have difficulties trying to download a PDF with javascript.


I don't want to use the default previewer from Box but open the file in the chrome viewer.
With ajax request I get corrs errors, I'm providing the domain in the header of the request and added the domain in the app's config CORRS configuration field.

Something like this:



function openPdf(fileData) {
var win = window.open("", "");
var obj = '';
obj += ('<embed width=\'100%\' height=\'100%\' src="data:application/pdf;base64,');
obj += (fileData);
obj += ('" type="application/pdf" />');
win.document.write(obj);
}


function getLink() {


var boxDownloadLink = document.getElementById("boxLink").value;
var xhttp = new XMLHttpRequest();


xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {


document.getElementById("boxDownloadLink").value = this.responseText;
getDoc();
}
};
xhttp.onerror = function()
{
document.getElementById("error").innerHTML = this.responseText;
}
xhttp.open("GET", boxDownloadLink, true);
xhttp.setRequestHeader("Authorization", "Bearer $1!EFqiYG8fTxQAQqVCiwx5Oq9dfvYYO...   ");
xhttp.setRequestHeader("Access-Control-Allow-Origin", "https://localhost:8080");
xhttp.send();
}


function getDoc() {


var boxLink = document.getElementById("boxDownloadLink").value;
var xhttp = new XMLHttpRequest();


xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {


openPdf(this.responseText);
}
};


xhttp.open("GET", boxLink, true);
xhttp.setRequestHeader("Access-Control-Allow-Origin", "http://localhost:8080");
xhttp.send();
}


And in the body of the html page:


Box link: <input id="boxLink" type="text" value="https://{my company}/file/746288922230?fields=download_url" size="40" />
<br />
Box download link: <input id="boxDownloadLink" type="text" value="" size="40"/>


<br />
<a href="javascript:getLink();">Klik hier op de PDF te openen.</a>



Kind regards,

Marcel

The error in the console:


Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://{my company}/file/746288922230/content. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).


Reply