I am trying to develop an app for mobile devices using Sencha and Cordova. As PDf support is not available in the browsers of Android I decided to use PDF.JS. It is working fine while loading the local PDf files, but when tring to open remote files it is throwing an error

http://<remote server pdf location>. Origin file:// is not allowed by Access-Control-Allow-Origin

Please let me know how to fix this issue. Is there any way to fix this in PDF.JS. I need PDF.Js files locally only as the app needs offline capability also.

Thanks in advance

I am trying to develop an app for mobile devices using Sencha and Cordova. As PDf support is not available in the browsers of Android I decided to use PDF.JS. It is working fine while loading the local PDf files, but when tring to open remote files it is throwing an error

http://<remote server pdf location>. Origin file:// is not allowed by Access-Control-Allow-Origin

Please let me know how to fix this issue. Is there any way to fix this in PDF.JS. I need PDF.Js files locally only as the app needs offline capability also.

Thanks in advance

• javascript
• cordova
• sencha-touch
• pdf.js

3 Answers 3

Issue is occurring when PDF.js is using WebWorkers to download the document. CORS in WebWorkers is a complete mess across browsers. (CORS is a mess IMHO anyway.)

The usual recommendation will not work:

<access origin="*" subdomains="true" />

Solution: do the ajax yourself, with response type arraybuffer, then feed response to PDF.js:

.success(function(buffer){
    PDFJS.getDocument(buffer);  
})

Rather than calling PDFJS.getDocument with a URL, first get the binary data via a XMLHttpRequest, and then pass the result to the getDocument call in place of the URL. This will avoid the problem that seems inherent to the PDFJS library when running within a Cordova app.

The following code example is taken from the pdfJs example found here: https://bitbucket.org/butelo/pdfviewer/downloads . The issue can be resolved by making the following changes in customview.js

Replace this code:

/* ---- customview.js ----- */
PDFJS.getDocument(url)
    .then(function getPdfHelloWorld(_pdfDoc) {
      pdfDoc = _pdfDoc;
      renderPage(pageNum);
    });

With this code:

/* ---- customview.js ----- */
function callGetDocment (response) {
  // body...

  PDFJS.getDocument(response).then(function getPdfHelloWorld(_pdfDoc) {
    pdfDoc = _pdfDoc;
    renderPage(pageNum);
  });
}

function getBinaryData (url) {
    // body...
    var xhr = new XMLHttpRequest();

    xhr.open('GET', url, true);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function(e) {
        //binary form of ajax response,
        callGetDocment(e.currentTarget.response);
    };

    xhr.onerror = function  () {
        // body...
        alert("xhr error");
    }

    xhr.send();
}

So that you will call:

var url = 'http://nodetuts.com/pdf/handson-nodejs-sample.pdf';
getBinaryData(url); //call this fn on page load 

Instead of:

var url = 'http://nodetuts.com/pdf/handson-nodejs-sample.pdf';
PDFJS.getDocument(url);

I solved this using a simple Hack, open your pdf.js code and first beautify it using https://beautifier.io/ . Now, copy all code to a code editor and search for a string "Unable to load " Then you will see a code something like this

Now, you have to add i.setRequestHeader("Origin", window.location.hostname); after const i = new XMLHttpRequest; (347 LINE)

Final code will look like this

Notice a new added line at 348

Now, save it and you are ready to go!! No, Problem with CORS :)