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