这篇主要是对上一篇博客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 = ;

  imgObj1.height = ;

  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

cesium billboard跨域问题2的更多相关文章

  1. cesium billboard跨域问题1

    群里小伙伴问道使用billboard加载图片时出现跨域问题,一般认为在服务器端设置 Access-Control-Allow-Origin: * 例如用tomcat发布图片服务,可以这样设置:http ...

  2. 基于Cesium1.26地图API下的GeoServer2.9.0服务器跨域设置

    遇到的问题: 最近基于Cesium来做3D模型的地图开发,在访问自己发布的WMS服务之后,遇到了GeoServer跨域问题. 调用这个WMS服务的时候,浏览器(我用Chrome)开发者工具报错: 控制 ...

  3. 解决ajax跨域的方法原理详解之Cors方法

    1.神马是跨域(Cross Domain)   对于端口和协议的不同,只能通过后台来解决.   一句话:同一个ip.同一个网络协议.同一个端口,三者都满足就是同一个域,否则就是 跨域问题了.而为什么开 ...

  4. 16.vue-cli跨域,swiper,移动端项目

    ==解决跨域:== 1.后台 cors cnpm i -S cors 2.前端 jsonp 3.代理 webpack: myvue\config\index.js 找 proxyTable proxy ...

  5. Geoserver跨域问题

    1 Geoserver位war包,使用Tomcat发布的情况 由于geoserver为war形式,需要解决tomcat跨域问题,geoserver版本为2.9.1. (1)下载跨域war包 下载cor ...

  6. 基于nodejs中实现跨域的方法

    一般情况下跨域是通过ajax的方式请求数据,通过js在不同的域之间进行数据传输或者通信: 只有通过ajax方式获取请求的时候才会有跨域问题需要解决: 例如在本地模拟两个服务端. 一个服务端去通过aja ...

  7. Qt(QtWebEngine)加载本地网页跨域问题的总结

    目录 1. 概述 2. 详论 2.1. 传参 2.2. JS module 3. 建议 4. 参考 1. 概述 浏览器直接加载本地网页的时候,如果网页涉及到加载本地资源(如图片),会出现跨域的问题.Q ...

  8. Ajax及跨域

    概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...

  9. Taurus.MVC 2.2 开源发布：WebAPI 功能增强（请求跨域及Json转换）

    背景: 1:有用户反馈了关于跨域请求的问题. 2:有用户反馈了参数获取的问题. 3:JsonHelper的增强. 在综合上面的条件下,有了2.2版本的更新,也因此写了此文. 开源地址: https:/ ...

随机推荐

  1. VS2017清除工具、用于清除Microsoft Visual Studio最近打开项目

    最近每天在用VS2017,但是每次打开它都会弹出最近项目的记录,很是烦人. 最主要是我不想别人得知我最近的项目和项目进度,每次加密项目会比较麻烦. 所以经过简单的研究,编写了这个小工具,打开直接单击就 ...

  2. 微软发布云端基因服务：推动AI驱动的精准医疗

    微软发布云端基因服务:推动AI驱动的精准医疗 2018年03月07日 00:00:00 微软研究院AI头条 阅读数:117    版权声明:本文为博主原创文章,未经博主允许不得转载. https:// ...

  3. pickle 和 base64 模块的使用

    pickle pickle模块是python的标准模块,提供了对于python数据的序列化操作,可以将数据转换为bytes类型,其序列化速度比json模块要高. pickle.dumps() 将pyt ...

  4. 最近公共祖先 LCA (Lowest Common Ancestors)-树上倍增

    树上倍增是求解关于LCA问题的两个在线算法中的一个,在线算法即不需要开始全部读入查询,你给他什么查询,他都能返回它们的LCA. 树上倍增用到一个关键的数组F[i][j],这个表示第i个结点的向上2^j ...

  5. Struts标签<s:if>判断字符串是否包含一个固定的值

    Struts标签<s:if>判断字符串是否包含一个固定的值:1.如果比较对象是字符串: <s:if test="str.contains('判断是否包含的字符串')&quo ...

  6. 使用vue国际化中出现内置的组件无法切换语言的问题(element-ui、ivew)

    在main.js中引入对应组件的语言包 eg: import VueI18n from 'vue-i18n'; // 引入国际化 import elementEn from 'element-ui/l ...

  7. CVE-2019-0214: Apache Archiva arbitrary file write and delete on the server

    CVE-2019-0214: Apache Archiva arbitrary file write and delete on the server Severity: Medium Vendor: ...

  8. pkg-config命令

    返回已安装库文件的元信息 pkg-config读取.pc文件获取信息 基本思想 编译的时候-I指定头文件路径:-L指定库文件路径.这样做总感觉很麻烦 事先把库的位置信息等保存起来,需要的时候再通过特定 ...

  9. 关于NavigationBar的笔记

    1常用几个方法 全局 //设置navigationBar 的类型 ,ps: status bar的状态受navigationbar控制(当用navigationcontroller时,通过设置此属性改 ...

  10. ELK6.x_Kafka 安装配置文档

    1. 环境描述 1.1.   环境拓扑 如上图所示:Kafka为3节点集群负责提供消息队列,ES为3节点集群.日志通过logstash或者filebeat传送至Kafka集群,再通过logstash发 ...