Cross-origin image load from cross-enabled site is denied

问题

I'm trying to use CORS enabled image which is located on cors-enabled site: dropbox.com.
I've got an error: cross-origin image load denied by CORS policy.

How to fix it?

<html>
    <body>
        <img id="output" src="#"/>

        <script>
            var img = new Image();
            img.crossOrigin = "anonymous";

            var canvas = document.createElement("canvas");

            img.onload = function () {
                canvas.width = img.width;
                canvas.height = img.width;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0);
            }

            img.src = "https://www.dropbox.com/s/54an0126onoxezj/stone1.png";

            var output = document.getElementById("output");
            output.src = canvas.toDataURL("image/png");

        </script>
    </body>

回答1:

The page you're linking to isn't CORS-enabled, but you don't actually want to download that page (which is HTML) anyway. You want the image that is displayed there. A direct link to that file is CORS-enabled: https://dl.dropboxusercontent.com/s/54an0126onoxezj/stone1.png.

The way to convert a share link to a direct link is to change the domain from www.dropbox.com to dl.dropboxusercontent.com. See https://www.dropbox.com/developers/blog/53/programmatically-download-content-from-share-links.

回答2:

I'm trying to use CORS enabled image which is located on cross-enabled site: dropbox.com.

Dropbox isn't "cross-enabled".

Correction: It appears that Dropbox's public folder is, but the URL you are using is not.

I've got an error: cross-origin image load denied by CORS policy.

And that's the evidence that it isn't

How to fix it?

Since you have no way of reconfiguring Dropbox's server to give you permission, you have to get the image from some other source. e.g. proxy them through your own server.

If you were able to reconfigure the server, then you would enable CORS:

Access-Control-Allow-Origin: https://your.site.example.com

来源：https://stackoverflow.com/questions/20757891/cross-origin-image-load-from-cross-enabled-site-is-denied

标签

javascript

image

html5-canvas

dropbox

cors