CDN的技术术语

CDN的技术术语

更新时间:2018-07-30 17:26:00


什么是Referer

Referer是HTTP Header的一部分,当浏览器向Web服务器发送请求时,一般会带上Referer,告知服务器从哪个页面链接过来的。

Referer的作用

  • 防盗链。比如,网站访问自己的图片服务器,图片服务器取到Referer来判断是不是自己的域名,如果是就继续访问,不是则拦截。
  • 数据统计。比如,统计用户是从哪里链接过来访问的。

什么是空Referer

空Referer指的是HTTP请求中Referer头部内容为空,或者HTTP请求中不包含Referer头部。有两种情况Referer为空,如下所示。
  • 当请求并不是由链接触发产生。比如,直接把地址输入地址栏里打开页面。
  • 从HTTPS页面上的链接访问到非加密的HTTP页面时,在HTTP页面上是检查不到Referer的。

在防盗链设置中允许空Referer和不允许空Referer的区别

在防盗链的白名单设置中,如果指明白名单中包含空的Referer,那么通过浏览器地址栏直接访问该资源URL是可以访问到的。但如果不指明需要包含空的Referer,那么通过浏览器直接访问是被禁止的。

什么是跨域

在日常的项目开发时会不可避免的需要进行跨域操作,而在实际进行跨域请求时,经常会遇到类似 No 'Access-Control-Allow-Origin' header is present on the requested resource.这样的报错。这类错误一般是由于CORS跨域验证机制设置不正确导致的。

什么是CORS

CORS(Cross-Origin Resource Sharing 跨源资源共享),当一个请求URL的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。例如最常见的,在一个域名下的网页中,调用另一个域名中的资源。
相对于上面这种静态的调用方式,还可以通过Ajax技术来动态发起跨域请求。例如如下的方式,利用XMLHttpRequest对象发送一个GET请求,获取另一个域名下的图片内容。
<!DOCTYPE html> 
<html>
    <head>CORS Test</head>
    <body>
        <div id="img_Div"></div>
    <script type="text/javascript">  
        //XmlHttpRequest对象  
        function createXmlHttpRequest(){  
            if(window.ActiveXObject){ //如果是IE浏览器  
                return new ActiveXObject("Microsoft.XMLHTTP");  
            }else if(window.XMLHttpRequest){ //非IE浏览器  
                return new XMLHttpRequest();  
            }  
        }  

        function getFile() {
            var img_Container = document.getElementById("img_Div");
            var xhr = createXmlHttpRequest();
            xhr.open('GET', 'http://oss.xxxxxxxxx.com/1.jpg', true);
            xhr.setRequestHeader('Content-Type', 'image/jpeg');
            xhr.responseType = "blob";
            xhr.onload = function() {
                if (this.status == 200) {
                    var blob = this.response;
                    var img = document.createElement("img");
                    img.onload = function(e) {
                        window.URL.revokeObjectURL(img.src); 
                    };
                    img.src = window.URL.createObjectURL(blob);
                    img_Container.appendChild(img);    
                }
            }
            xhr.send(null);
        }
    </script>
    <div class="row">
        <input type="button" onclick="getFile()" value="Get" />
    </div>
    </body>
</html>

CORS的作用

为了改善网络应用程序,开发人员要求浏览器供应商允许跨域请求。跨域请求主要用于以下几个方面。
  • 调用XMLHttpRequest或fetchAPI通过跨站点方式访问资源。
  • 网络字体,例如通过CSS使用@font-face 跨域调用字体。
  • 通过canvas标签,绘制图表和视频。

适用于

  • CDN