被CORS阻止的JavaScript图像

下面的代码由一个HTML选项卡和一个模式组成，下面我所做的是使用库

HTML2Canvas

捕获所选的

div

。但问题是，当我单击“下载”时，它不会捕获下载文件中的图像

它一直有此错误

从源站访问“//Image LINK”处的图像http://localhost'已被CORS策略阻止：请求的资源上不存在'Access Control Allow Origin'标头。起源'http://localhost因此，不允许访问。

我曾尝试在img中添加crossorigin:anonymous，但仍然没有成功。有没有简单的方法来解决这个问题？任何帮助都将不胜感激

函数sendData（）{
$（'#myModal2'）.addClass（'modal-posit'）；
var modalButton=$（'[data target=“#myModal2”]'）[0]；
modalButton.click（）；
var modal=$（'#myModal2'）[0]；
setTimeout（函数（）{
html2canvas（document.getElementById（'capture'）{
允许绘制：错误，
乌塞科尔斯：是的
}).then（功能（画布）{
下载画布（document.getElementById（'test'），画布，'test.png'）；
modalButton.click（）；
});
}, 1000);
}
函数openCity（evt、cityName）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i
正文{
字体系列：Arial；
}
.标签{
溢出：隐藏；
边框：1px实心#ccc；
背景色：#f1f1；
边缘顶部：10px；
边框左上半径：8px；
边框右上角半径：8px；
}
/*设置选项卡内按钮的样式*/
.选项卡按钮{
背景色：继承；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.3s；
字号：17px；
边框底部：8px；
}
/*更改悬停按钮的背景色*/
.tab按钮：悬停{
背景色：#ddd；
}
/*创建活动/当前tablink类*/
.tab按钮。激活{
背景色：#ccc；
}
/*设置选项卡内容的样式*/
.tabcontent{
显示：无；
填充：6px 25px；
边框：1px实心#ccc；
边界顶部：无；
-webkit动画：fadeEffect 1s；
动画：FadeEffect1s；
边框左下半径：8px；
边框右下半径：8px；
背景色：白色；
}
.就业小组{
显示：表格；
最大高度：100%；
宽度：85%；
背景色：#b7bcbe；
左边距：自动；
右边距：自动；
边缘顶部：25px；
边缘底部：25px；
垫底：20px；
填充顶部：20px；
}
.tabwidth{
宽度：85%；
保证金：0自动；
}
.模态假设{
位置：相对位置；
}

模态按钮
图表
巴黎
巴黎是法国的首都

东京
东京是日本的首都

&时代；
常见问题
问题
接近
捕获
CORS对图像的权限要求服务器和浏览器执行操作

首先，浏览器必须请求CORS权限。
您可以通过在图像上设置
交叉原点
来完成此操作。范例

const img = new Image();
img.crossOrigin = "anonymous";
img.src = "https://somesite.com/someimage.jpg"

注意，
交叉原点
有3个有效值

未定义

这意味着浏览器不会请求CORS权限，也不会检查标题。即使服务器发送头，您仍然会收到安全错误，这取决于您试图对来自另一个域的映像执行的操作。这是默认设置

“使用凭据”

这意味着浏览器将向服务器发送额外的信息（cookies等），以便决定是否授予权限

还有别的吗

你可以放“”或“匿名”或“foobarmoo”或任何东西。如果它不是未定义的，也不是“使用凭据”，那么它就是第三个版本。这意味着，在没有任何额外信息的情况下，请求全面CORS许可

其次，服务器必须发送正确的头。
如果控制服务器，则需要将其配置为发送正确的头。每台服务器都是不同的（apache、nginx、caddy等）。每台服务器都是不同的，如果您想知道如何配置该特定服务器，您应该在该服务器的文档中查找该服务器，或者询问该服务器的特定问题

默认情况下，大多数服务器不发送CORS头。此外，大多数第三方网站不发送图像的CORS头。3个例外是imgur、github页面和flickr（遗憾的是至少在2018年7月还没有stack.imgur）。如果您试图从网络上的随机服务器访问图像，那么除了联系他们的客户支持并要求他们添加标题之外，您就没有运气了

在您的情况下，您正在访问AWS上的图像。AWS上的服务器未发送CORS标头。你的解决方案是（a）如果你控制了那里的服务器（b）让控制该服务器的人添加CORS头（c）意识到没有（a）或（b）你无法做你想做的事情

这里有一个演示：我们将尝试加载您的图像，一个图像