来自跨启用站点的跨域图像加载被拒绝

2022-01-17 00:00:00 cors image dropbox javascript html5-canvas

我正在尝试使用启用 CORS 的图像，该图像位于启用 cors 的站点:dropbox.com.
我遇到了一个错误:CORS 政策拒绝跨域图像加载.

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.

如何解决?

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

推荐答案

您链接到的页面未启用 CORS，但您实际上并不想下载该页面(即 HTML).您想要在那里显示的图像.该文件的直接链接 启用了 CORS:https://dl.dropboxusercontent.com/s/54an0126onoxezj/stone1.png.

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.

将共享链接转换为直接链接的方法是将域从 www.dropbox.com 更改为 dl.dropboxusercontent.com.请参阅 https://www.dropbox.com/developers/blog/53/programmatically-download-content-from-share-links.

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.

相关文章