现象:项目中使用angularjs2+cytoscape.js绘制网络拓扑图,其中节点背景使用了图片显示,在windows环境下调测,所有浏览器都正常显示,但是一放到Linux环境服务器上,IE11浏览器下访问无法显示,其他浏览器正常。
问题:通过对cytoscape.js源码打印发现请求图片是通过<img crossorigin="anonymous" src="assets/imgs/bird.jpg">方式去获取图片,打开nginx访问日志记录,只要IE11浏览器发送的http图片请求都会报302状态码。经分析,crossorigin属性是为了解决跨域问题使用,而我们项目中的图片都是在相应服务器上,并不需要跨域获取。
方法:将cytoscape.cjs.js中BRp.getCachedImage方法中如下内容
var dataUriPrefix = 'data:';
var isDataUri = url.substring(0, dataUriPrefix.length).toLowerCase() === dataUriPrefix;
if (!isDataUri) {
image.crossOrigin = crossOrigin; // prevent tainted canvas
}
修改为:
if(url.indexOf("http://")!== -1||url.indexOf("https://")!== -1){
image.crossOrigin = crossOrigin; // prevent tainted canvas
}