为什么跨源图像请求被Cytoscape.js阻止,而不是被d3.js阻止?

为什么跨源图像请求被Cytoscape.js阻止,而不是被d3.js阻止?,d3.js,cytoscape.js,D3.js,Cytoscape.js,尽管Cytoscape.js支持节点中的背景图像,但我无法显示没有CORS(跨源资源共享)头的图像。Chrome抛出以下错误 Access to image at 'https://cdn2-www.dogtime.com/assets/uploads/gallery/goldendoodle-dog-breed-pictures/puppy-4_1.jpg' from origin 'https://null.jsbin.com' has been blocked by CORS policy

尽管Cytoscape.js支持节点中的背景图像,但我无法显示没有CORS(跨源资源共享)头的图像。Chrome抛出以下错误

Access to image at 'https://cdn2-www.dogtime.com/assets/uploads/gallery/goldendoodle-dog-breed-pictures/puppy-4_1.jpg'
from origin 'https://null.jsbin.com' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.
这是我试图访问的图像-

但是,如果我尝试使用d3.js在节点中显示与背景相同的图像,则会显示图像

Cytoscape.js

var-cy;
addEventListener('DOMContentLoaded',function(){
cy=细胞景观({
容器:document.getElementById('cy'),
样式:cytoscape.stylesheet()
.selector('节点')
.css({
身高:60,,
“宽度”:60,
“背景适合”:“封面”,
“边框颜色”:“000”,
“边框宽度”:1,
“标签”:“数据(标签)”
})
.selector('边')
.css({
“宽度”:2,
“线条颜色”:“ffaaa”,
“目标箭头颜色”:“ffaaa”,
“曲线样式”:“bezier”,
})
.选择器(“#小狗”)
.css({
'背景图像':'https://cdn2-www.dogtime.com/assets/uploads/gallery/goldendoodle-dog-breed-pictures/puppy-4_1.jpg'
})
.选择器(“#cat”)
.css({
'背景图像':'https://farm2.staticflickr.com/1261/1413379559_412a540d29_b.jpg'
}),
要素:{
节点:[{
数据:{
id:'猫',
标签:“支持图像”
}
},
{
数据:{
id:'小狗',
标签:“未显示所需图像”
}
},
],
边缘:[{
数据:{
资料来源:“cat”,
目标:“小狗”,
标签:“小狗”
}
}]
},
布局:{
名称:“圆圈”
}
});//cy init
});
正文{
字体:14px helvetica neue,helvetica,arial,无衬线;
}
#赛义德{
身高:70%;
宽度:100%;
位置:绝对位置;
左:100 ;;
排名前100名;
}

图像

在您的特定示例中,如果您将
交叉源设置为
匿名
,则它不起作用,但如果您不设置它(即
为空
),则它起作用

默认情况下,Cytoscape.js将图像的
crossOrigin
字段设置为
anonymous
。无法将其设置为
null

但是如果您仍然需要,您可以使用源代码:将
crossOrigin
字段设置为
null
将显示此特定图像

在这种情况下,如果将原点设置为
null
,则可以工作,但将其设置为
匿名
则不起作用

注:如果你愿意,你也可以在开发者工具的网络标签中运行你的代码片段并分析响应和请求头。在Firefox中,您可以编辑标题,重新发送请求,并查看它如何影响响应