7

Dispongo de una web realizada en asp.net mvc, en ella he de tener un visualizador de pdfs, opté por escoger el de Mozilla, pero al momento de visualizar el pdf me sale el siguiente error:

Access to XMLHttpRequest at 'file:///C:Ruta/pdf/pdf_ejemplo4.pdf' from origin 'http://localhost:57130' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

He mirado esta solución, pero me parece muy especifica para su problema, añadiendo cosas a clases que yo no dispongo.

El código que utilizo para llamar al pdf es:

function cargarPdf(ruta) {
            // If absolute URL from the remote server is provided, configure the CORS
            // header on that server.

            var url = ruta;


            // Loaded via <script> tag, create shortcut to access PDF.js exports.
            var pdfjsLib = window['pdfjs-dist/build/pdf'];
            //console.log(pdfjsLib);
            // The workerSrc property shall be specified.
            pdfjsLib.GlobalWorkerOptions.workerSrc = '../Public/js/PDFJS/pdf.worker.js';

            var pdfDoc = null,
                pageNum = 1,
                pageRendering = false,
                pageNumPending = null,
                scale = 0.65,
                canvas = document.getElementById('the-canvas'),
                ctx = canvas.getContext('2d');

            /**
             * Get page info from document, resize canvas accordingly, and render page.
             * param num Page number.
             */

            function renderPage(num) {
                pageRendering = true;
                // Using promise to fetch the page
                pdfDoc.getPage(num).then(function (page) {
                    var viewport = page.getViewport({ scale: scale });
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;

                    // Render PDF page into canvas context
                    var renderContext = {
                        canvasContext: ctx,
                        viewport: viewport
                    };
                    var renderTask = page.render(renderContext);

                    // Wait for rendering to finish
                    renderTask.promise.then(function () {
                        pageRendering = false;
                        if (pageNumPending !== null) {
                            // New page rendering is pending
                            renderPage(pageNumPending);
                            pageNumPending = null;
                        }
                    });
                });

                // Update page counters
                document.getElementById('page_num').textContent = num;
            }

            /**
             * If another page rendering in progress, waits until the rendering is
             * finised. Otherwise, executes rendering immediately.
             */
            function queueRenderPage(num) {
                if (pageRendering) {
                    pageNumPending = num;
                } else {
                    renderPage(num);
                }
            }

            /**
             * Displays previous page.
             */
            function onPrevPage() {
                if (pageNum <= 1) {
                    return;
                }
                pageNum--;
                queueRenderPage(pageNum);
            }
            document.getElementById('prev').addEventListener('click', onPrevPage);

            /**
             * Displays next page.
             */
            function onNextPage() {
                if (pageNum >= pdfDoc.numPages) {
                    return;
                }
                pageNum++;
                queueRenderPage(pageNum);
            }
            document.getElementById('next').addEventListener('click', onNextPage);

            /**
             * Asynchronously downloads PDF.
             */
            pdfjsLib.getDocument(url).promise.then(function (pdfDoc_) {

                pdfDoc = pdfDoc_;
                document.getElementById('page_count').textContent = pdfDoc.numPages;

                // Initial/first page rendering
                renderPage(pageNum);
            });
        }

Al ejecutar este código me saltan dos errores:

ERROR 1pdf.js:23842 Uncaught TypeError: Cannot read property 'xhr' of undefined at NetworkManager.getRequestXhr (pdf.js:23842) at PDFNetworkStreamFullRequestReader._onHeadersReceived (pdf.js:23969) at NetworkManager.onStateChange (pdf.js:23779) at NetworkManager.request (pdf.js:23751) at NetworkManager.requestFull (pdf.js:23707) at new PDFNetworkStreamFullRequestReader (pdf.js:23944) at PDFNetworkStream.getFullReader (pdf.js:23897) at WorkerTransport. (pdf.js:11495) at _callee$ (pdf.js:16870) at tryCatch (pdf.js:12428)

ERROR 2: pdf.js:24035 Uncaught TypeError: Cannot read property 'reject' of undefined at PDFNetworkStreamFullRequestReader._onError (pdf.js:24035) at XMLHttpRequest.xhr.onerror (pdf.js:23741) at NetworkManager.request (pdf.js:23751) at NetworkManager.requestFull (pdf.js:23707) at new PDFNetworkStreamFullRequestReader (pdf.js:23944) at PDFNetworkStream.getFullReader (pdf.js:23897) at WorkerTransport. (pdf.js:11495) at _callee$ (pdf.js:16870) at tryCatch (pdf.js:12428) at Generator.invoke [as _invoke] (pdf.js:12603)

Si a la función cargarPdf le paso como parametro un string con la ruta escrita desde la web si que visualiza el pdf pero al recoger la ruta desde bd salta el error.

2
  • Estás tratando de acceder a un fichero local (C:Ruta/pdf/pdf_ejemplo4.pdf), es normal que el navegador no te deje. Commented el 3 oct. 2019 a las 9:20
  • @PabloLozano y como lo arreglo? Commented el 3 oct. 2019 a las 9:22

2 respuestas 2

8

En principio rige la política de mismo origen, en resumen por defecto no se pueden compartir recursos entre orígenes distintos. Esta política rige desde 1995 aproximadamente.
La política de Intercambio de recursos de origen cruzado (CORS) nace en 2004 aproximadamente para poder compartir de forma segura recursos entre orígenes distintos.

Hacer un XMLHttpRequest (ajax) a file:// viola ambos políticas, aunque localhost y file sean la misma máquina, se entiende que son orígenes distintos. Un origen se entiende que es la combinación de esquema + host + puerto, rfc6454.

Imaginemos este caso:

  • El usuario A guarda las contraseñas de los bancos en un archivo passwords.txt que está en su escritorio.
  • El usuario B hace una script en su página (robandocontraseñas.com) haciendo un ajax GET a file://usuarioA/escritorio/passwords.txt y luego otro ajax enviándose el contenido a su server.
  • El usuario A ingresa a robandocontraseñas.com, entonces el usuario B tiene las contraseñas del usuario A.

Para poder acceder al pdf, o cualquier otro recurso via XMLHttpRequest tienes que tener en cuenta esto:

  • Deben estar en el mismo origen (esquema + host + puerto) una excepción sería http requiriedo el recurso de https pero no al reves. ver Contenido Mixto o bien...

  • Si están en orígenes distintos empieza a ser relevante CORS, en donde solo esta permitido GET, HEAD y POST y los esquemas http y https (con excepciones), además el servidor debe responder con el header Access-Control-Allow-Origin aceptando explícitamente al servidor que hace el request.

5

El mensaje de error:

Access to XMLHttpRequest at 'file:///C:Ruta/pdf/pdf_ejemplo4.pdf' from origin 'http://localhost:57130' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Traducción aproximada:

El acceso de XHR a 'file:///C:Ruta/pdf/pdf_ejemplo4.pdf'desde el origen http:// localhost:57130 ha sido bloqueado por la política CORS: Peticiones entre distintos orígenes sólo se aceptan para los esquemas de protocolo: http, data, chrome, chrome-extension, https.

Es decir, desde una URL que empieza por http: (algo habitual) estás intentando acceder a un recurso cuya URL empieza file:, que no está en la lista de esquemas permitidos.

Realmente el problema es más grave que eso: el fichero PDF que intentas acceder se busca en el dispositivo del cliente, no en el servidor. Sólo funcionaría si el servidor y el cliente fuesen siempre la misma máquina. Debes servir el fichero PDF desde el servidor web, a través de HTTP(S).

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.