备案控制台
文档
产品文档
输入文档关键字查找
首页

CDN的技术术语

更新时间：
一键部署
我的收藏

什么是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跨域验证机制设置不正确导致的。该报错的处理方法请参见请求CDN加速域名出现跨域问题并提示“The 'Access-Control-Allow-Origin' header has a value 'xxx' that is not equal to the supplied origin”。

什么是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

 

  • 本页导读
文档反馈