拒绝来自交叉启用站点的跨源图像加载 [英] Cross-origin image load from cross-enabled site is denied
问题描述
我正在尝试使用位于启用cors的网站上的CORS启用的图片：dropbox.com。
我遇到了错误： CORS拒绝跨原始图片加载
如何解决？
< html>
< body>
< img id =outputsrc =＃/>
< 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 。
将共享链接转换为直接链接的方式是将域从 www.dropbox.com 到 dl.dropboxusercontent.com 。请参见 https://www.dropbox.com/developers/blog/53 / programmatically-download-content-from-share-links 。
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>
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.
这篇关于拒绝来自交叉启用站点的跨源图像加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![https：//dl.dropboxusercontent。 com / s / 54an0126onoxezj / stone1.png](\"https://dl.dropboxusercontent.com/s/54an0126onoxezj/stone1.png\"){kind=link}
