PDF.JS in Mobile apps Access-Control-Allow-Origin问题

Question

我正在尝试使用Sencha和Cordova为移动设备开发应用程序。由于Android的浏览器中没有PDf支持，我决定使用PDF.JS.它在加载本地PDf文件时工作正常，但是当打开远程文件时它会抛出错误

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

请告诉我如何解决此问题。有没有办法在PDF.JS中解决这个问题。我本地需要PDF.Js文件，因为应用程序也需要离线功能。

提前致谢

Answer 1

当PDF.js使用WebWorkers下载文档时，会出现问题。 WebWorkers中的CORS在浏览器中是一个完整的混乱。 （无论如何，CORS是一个混乱的恕我直言。）

usual recommendation不起作用：

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

解决方案：使用响应类型arraybuffer 自行执行ajax，然后将响应反馈给PDF.js：

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

Answer 2

不是通过URL调用PDFJS.getDocument，而是首先通过XMLHttpRequest获取二进制数据，然后将结果传递给getDocument调用以代替URL。这将避免在Cordova应用程序中运行时PDFJS库固有的问题。

以下代码示例取自此处的pdfJs示例：https://bitbucket.org/butelo/pdfviewer/downloads。可以通过在customview.js

中进行以下更改来解决此问题

替换此代码：

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

使用此代码：

/* ---- 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();
}

这样你就会打电话：

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

而不是：

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

Answer 3

我使用一个简单的Hack解决了这个问题，打开您的pdf.js代码，然后首先使用https://beautifier.io/美化它。现在，将所有代码复制到代码编辑器中，然后搜索字符串“无法加载” 然后您将看到类似这样的代码

现在，您必须在之后添加i.setRequestHeader("Origin", window.location.hostname); const i = new XMLHttpRequest;（347行）

最终代码如下所示

请注意在348添加了新行

现在，保存并准备就绪！否，CORS有问题：）