how to enable cors on localhost/server

Question

I'm trying to load a pdf from external server and now I'm getting this error in console.

XMLHttpRequest cannot load https://mobile.switchitapp.com/uploads/pdf/userGuide.pdf. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://appsdata2.cloudapp.net' is therefore not allowed access.

How to get rid of this error? I have tried a lot but nothing has worked for me till now please help me out

thanks :)

here is my code

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

Try `var url = "https://cors-anywhere.herokuapp.com/https://mobile.switchitapp.com/uploads/pdf/userGuide.pdf"` and see https://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource/42744707#42744707 for an explanation — sideshowbarker, Jun 21 '17 at 13:25
doesn't work either also I want to do this on my server I have tried enable cors thing but I don't know where I'm wrong. — , Jun 21 '17 at 13:29
The problem is that the https://mobile.switchitapp.com site doesn’t send the Access-Control-Allow-Origin response header in its responses. Is that your site? If not then there’s nothing you can do to fix it other than making the request through a proxy as in my other comment. — sideshowbarker, Jun 21 '17 at 13:34
nope it's not mine site actually in google gview it's working fine so I want the same thing to be done on my server like google is doing. can you please provide the insight behind this? It will be helpful for me.. :) — , Jun 21 '17 at 13:40

score 0 · Answer 1 · answered Jun 21 '17 at 14:04

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

doesn't work either also

The suggested solution is the comment shall work. Please see:

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

yes its working but what about if I want to do on my server. — , Jun 21 '17 at 14:06

score -1 · Answer 2 · answered Jun 21 '17 at 16:59

Enabling CORS on localhost is no different from enabling on any remote server. See https://enable-cors.org/server.html

Your problem that you cannot do that for remote server, and you really need to enable CORS there instead of localhost. You question is somewhat invalid.

how to enable cors on localhost/server

2 Answers2