cesium billboard跨域问题2

这篇主要是对上一篇博客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.如何解决跨域问题

看这篇博客https://www.cnblogs.com/SmilingEye/p/11158405.html