Question

我试图从外部服务器加载pdf，现在我在控制台中收到此错误。

XMLHttpRequest无法加载 https://mobile.switchitapp.com/uploads/pdf/userGuide.pdf。没有＆＃39;访问控制允许来源＆＃39;标题出现在请求的上资源。起源＆＃39; http://appsdata2.cloudapp.net＆＃39;因此不是允许访问。

如何摆脱这个错误？我已经尝试了很多，但是到目前为止我还没有任何帮助，请帮助我

谢谢：）

这是我的代码

<!DOCTYPE html>
<html>
<head>
    <title>PDF.js Learning</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.8.472/pdf.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.8.472/pdf.worker.js"></script>
    <script>
        // URL of PDF document
        var url = "https://mobile.switchitapp.com/uploads/pdf/userGuide.pdf";

        // Asynchronous download PDF
        PDFJS.getDocument(url)
            .then(function(pdf) {
                return pdf.getPage(1);
            })
            .then(function(page) {
                // Set scale (zoom) level
                var scale = 1.5;

                // Get viewport (dimensions)
                var viewport = page.getViewport(scale);

                // Get canvas#the-canvas
                var canvas = document.getElementById('the-canvas');

                // Fetch canvas' 2d context
                var context = canvas.getContext('2d');

                // Set dimensions to Canvas
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                // Prepare object needed by render method
                var renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };

                // Render PDF page
                page.render(renderContext);
            });
    </script>
</head>
<body>
<canvas id="the-canvas"></canvas>
</body>
</html>

Answer 1

尝试var url =＆＃34; https://cors-anywhere.herokuapp.com/https://mobile.switchit app.com/uploads/pdf/ userGuide.pdf＆＃34;

也不起作用

建议的解决方案是评论应该有效。请参阅：

＆＃13;

// URL of PDF document
        var url = "https://cors-anywhere.herokuapp.com/" +
 "https://mobile.switchitapp.com/uploads/pdf/userGuide.pdf";

        // Asynchronous download PDF
        PDFJS.getDocument(url)
            .then(function(pdf) {
                return pdf.getPage(1);
            })
            .then(function(page) {
                // Set scale (zoom) level
                var scale = 1.5;

                // Get viewport (dimensions)
                var viewport = page.getViewport(scale);

                // Get canvas#the-canvas
                var canvas = document.getElementById('the-canvas');

                // Fetch canvas' 2d context
                var context = canvas.getContext('2d');

                // Set dimensions to Canvas
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                // Prepare object needed by render method
                var renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };

                // Render PDF page
                page.render(renderContext);
            });

＆＃13;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.8.472/pdf.js"></script>
 <canvas id="the-canvas"></canvas>

＆＃13;

Answer 2

在localhost上启用CORS与在任何远程服务器上启用没有什么不同。见https://enable-cors.org/server.html

您的问题是您无法为远程服务器执行此操作，并且您确实需要在那里启用CORS而不是localhost。你的问题有点无效。

如何在localhost / server上启用cors

2 个答案: