1. 技术文章
  2. failed to load script - Webworker (PDF.JS)

failed to load script - Webworker (PDF.JS)

由 丶灬走出姿态 提交于 2019-12-04 06:06:31

Your problem is that you're attempting to use a Web Worker to load a script from a different domain. The error number 0x805303f4 means "Access to restricted URI denied".

Quoting the Web workers specification:

If the scheme component of the resulting parsed URL is not "data", and the origin of the resulting absolute URL is not the same as the origin of the entry script, then throw a SecurityError exception and abort these steps.

Note: Thus, scripts must either be external files with the same scheme, host, and port as the original page, or data: URLs.

One way of solving this problem is to move the worker_loader script onto the same domain as the html page. So you would be initialising workerSrc something like this:

PDFJS.workerSrc = 'worker_loader.js?v=280';

And then you'd also need to update the worker_loader script to use absolute urls, so the import loop might become something like this:

for (var i = 0; i < files.length; i++) {
  importScripts('//cdn.localhost/js/pdf/'+files[i]);
}

Also, depending on where the voucher_url is hosted, that may also generate a cross domain security error, as that is loaded via an XMLHttpRequest. If that is the case, you'll need to set the Access-Control-Allow-Origin header on the domain that serves the pdf.

You can do this via a .htaccess file on Apache if you have the mod_headers module installed. You'll need to add something like this:

Header set Access-Control-Allow-Origin "http://secure.localhost"

If you need to support multiple hosts, you can use "*" instead of the host name, but that isn't generally advisable for security reasons.

I recently ran into this issue and there actually is a solution for loading the worker from a remote host, though it requires some javascript. As I detailed in a recent blog post, you can load it using AJAX (you'll need to configure your CORS headers) and then you can create a Blob URL from the AJAX response and set that as the PDFJS.workerUrl.

var cachedJSDfd = null;
function loadWorkerURL(url){
    if (cachedJSDfd) { return cachedJSDfd; }
    cachedJSDfd = PDFJS.createPromiseCapability();
    var xmlhttp;
    xmlhttp=new XMLHttpRequest();

    //the callback function to be callled when AJAX request comes back
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            var workerJSBlob = new Blob([xmlhttp.responseText], {
                type: "text/javascript"
            });
            cachedJSDfd.resolve(window.URL.createObjectURL(workerJSBlob));
        }
    };
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
    return cachedJSDfd.promise;
}

function initWebWorker() {
    return loadWorkerURL('http://www.domain.com/path/to/worker.js')).then(function(blob) {
        PDFJS.workerSrc = blob;
        return PDFJS;
    });
}

function openPdf(url) {
    return initWebWorker().then(function(PDFJS) {
        return PDFJS.getDocument(url);
    });
}

More specifics in the blog post linked above.

标签
javascript
pdf
web-worker
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!