移动应用程序中的 PDF.JS Access-Control-Allow-Origin 问题答案

【问题标题】：PDF.JS in Mobile apps Access-Control-Allow-Origin issue移动应用程序中的 PDF.JS Access-Control-Allow-Origin 问题
【发布时间】：2014-09-17 03:15:39
【问题描述】：

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

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

请告诉我如何解决此问题。有什么办法可以在 PDF.JS 中解决这个问题。我只需要本地的 PDF.Js 文件，因为该应用还需要离线功能。

提前致谢

【问题讨论】：

标签： javascript cordova sencha-touch pdf.js

【解决方案1】：

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

usual recommendation 不起作用：

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

解决方案：自己做 ajax，使用 response type arraybuffer，然后将响应提供给 PDF.js：

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

【讨论】：

【解决方案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);

【讨论】：

不工作，仍然被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

【解决方案3】：

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

现在，你必须在后面加上i.setRequestHeader("Origin", window.location.hostname); const i = new XMLHttpRequest;（347线）

最终代码如下所示

请注意在 348 处新增的一行

现在，保存它，您就可以开始了！！不，CORS 有问题 :)

【讨论】：