zoukankan      html  css  js  c++  java
  • 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 的请求数据,见下表,

    KeywordStateRequest ModeCredentials 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

  • 相关阅读:
    Excelファイルを扱う方法
    BINARYSEARCH有り無しのパフォーマンスの違い
    権限チェック
    ラジオボタンで選択項目を動的に変更
    ALVのイベントを取得する方法
    LOOP AT SCREEN
    MOVE-PERCENTAGE(文字列の部分の代入)
    Java快捷键与搜狗输入法快键的冲突
    Android之RadioButton多行
    Android之socket服务端
  • 原文地址:https://www.cnblogs.com/SmilingEye/p/11471013.html
Copyright © 2011-2022 走看看