如何在本地主机/服务器上启用 cors答案

【问题标题】：how to enable cors on localhost/server如何在本地主机/服务器上启用 cors
【发布时间】：2017-11-24 10:26:24
【问题描述】：

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

XMLHttpRequest 无法加载 https://mobile.switchitapp.com/uploads/pdf/userGuide.pdf。不请求中存在“Access-Control-Allow-Origin”标头资源。原点 'http://appsdata2.cloudapp.net' 因此不是允许访问。

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

谢谢:)

这是我的代码

<!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>

【问题讨论】：

试试var url = "https://cors-anywhere.herokuapp.com/https://mobile.switchitapp.com/uploads/pdf/userGuide.pdf" 看看stackoverflow.com/questions/20035101/… 的解释
也不起作用我也想在我的服务器上执行此操作我尝试过启用 cors 的东西，但我不知道我错在哪里。
问题是mobile.switchitapp.com 站点没有在其响应中发送 Access-Control-Allow-Origin 响应标头。那是你的网站吗？如果没有，那么除了像我的其他评论中那样通过代理发出请求之外，您无能为力。
不，它实际上不是我的网站，实际上在 google gview 中它工作正常，所以我希望在我的服务器上做同样的事情，就像 google 正在做的那样。你能提供这背后的见解吗？这对我会有帮助.. :)

标签： php cors pdfjs

【解决方案1】：

试试 var url = "https://cors-anywhere.herokuapp.com/https://mobile.switchit‌app.com/uploads/pdf/‌userGuide.pdf"

也不行

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

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

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

【讨论】：

是的，它可以工作，但是如果我想在我的服务器上做呢。

【解决方案2】：

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

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

【讨论】：