这篇主要是对上一篇博客cesium billboard出现跨域的原理分析
https://www.cnblogs.com/SmilingEye/p/11363837.html
1.源码位置
从Billboard.js文件,找到setImage方法。
找到TextureAtlas.js文件,找到addImage方法。
找到Resource.js文件,找到fetchImage方法。
最后在Resource.js文件,loadImageElement方法为最终加载方法。
2.源码
function loadImageElement(url, crossOrigin, deferred) { var image = new Image(); image.onload = function() { deferred.resolve(image); }; image.onerror = function(e) { deferred.reject(e); }; if (crossOrigin) { if (TrustedServers.contains(url)) { image.crossOrigin = 'use-credentials'; } else { image.crossOrigin = ''; } } image.src = url; }
3.分析
出现跨域主要是给image对象加入了crossOrigin属性。
crossorigin 属性不止可以用于<script>
标签,还可以用与<img>
,<video>
等标签,
用于配置 CORS 的请求数据,见下表,
Keyword | State | Request Mode | Credentials Mode |
---|---|---|---|
the attribute is omitted | No CORS | "no-cors" | "omit" |
"" | Anonymous | "cors" | "same-origin" |
"anonymous" | Anonymous | "cors" | "same-origin" |
"use-credentials" | Use Credentials | "cors" | "include" |
不同的crossorigin
值,指定了不同的Request Mode 和 Credentials Mode。
其中,术语use credentials指的是,cookies,http authentication 和客户端ssl证书。
4.重现错误
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ var imgObj1 = new Image; imgObj1.src = "https://www.w3school.com.cn/i/eg_tulip.jpg"; imgObj1.width = 100; imgObj1.height = 200; imgObj1.crossOrigin = 'use-credentials'; $("#box").append(imgObj1); }); </script> </head> <body> <div id="box"></div> </body> </html>
这段代码在菜鸟教程或者在本地存为html在打开,同样会出现跨域问题。
尝试修改
imgObj1.crossOrigin = '';
或者注释掉这段代码,重新测试(注意清理缓存)
5.如何解决跨域问题