这篇主要是对上一篇博客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. JSQI网站大事表 | Website Landmark

    2016-07-01 网站前身jsqi.50vip.com上线.2016-07-12 购买jsqi.org域名,替代之前的二级域名.2016-12-12 申请ChinaDMOZ收录,瞬间申请通过.20 ...

  2. 关于微信小程序获取多个formId的实现方法

    在此之前,很多人使用过form和button的多层嵌套来实现点击一次获取多个formId的目的,如下图所示,点击一次“提交”,可以获取到多个formId 但是在今年3月份,这个投机取巧的方法(算是微信 ...

  3. css之弹性盒模型

    弹性盒子(Flexible Box/filebox)是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式.引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子 ...

  4. apk签名文件生成

    一.生成签名文件 命令: keytool -genkey -v -keystore 签名文件名称.keystore -alias 签名文件别名 -keyalg RSA -keysize 2048 -v ...

  5. springboot @value 注解的使用

    1,通过@value来注入对应的值,直接在字段上添加@value 获取application.properties文件中的值. @Configuration public class DemoConf ...

  6. less嵌套规则

    嵌套,是less里面最有意思的小东西,比如说我们经常性的去写一些列表性的东西 html <ul class="list"> <li><a href=& ...

  7. less运算

    less里面是可以有运算的,任何数字,颜色或者变量都可以参与与暗算,运算应该被包裹在括号中.   @test_width:300px; .box_width{ width: (@test_width ...

  8. linux服务器管理

    1.找出目前系统开启的网络服务有哪些? netstat -tulp 2.找出所有的有监听网络的服务(包含socket状态) Netstat -lnp 3.查看所有的服务状态 Service –-sta ...

  9. How Many Answers Are Wrong(带权并查集)

    题目 带权并查集的博客~ 题目: 多组输入数据.n,m.你不知道[1,n]内任意区间内值的和. m次询问,a b 是端点,都在n的范围以内 : v表示 [a,b]的区间内值的和.对每次询问,判断v是否 ...

  10. Reverse数组以及大O表达式

    这篇主要是对数组实现一个倒排序(比如数组1.2.3,最后输出3.2.1),当然实现这个功能是非常easy的事,但是这里需要引入另外一个很重要的概念-----如何计算一个算法的时间复杂度并学会用大O表达 ...