nginx除了三大主功能,还有很多其它实用的功能,系列文章的第五篇就让我们一起看看nginx的防盗链、跨域、缓存、压缩等功能。
跨域
概念:浏览器拒接执行其它域名下的ajax
请求。
概念有点抽象。比如现在通过blog.itcrud.com
访问本博客的网站,在返回的js脚本文件里面又发出了ajax请求获取文章列表,但是这个ajax请求的域名不是blog.itcrud.com/list
,而是请求的blog.xxx.com/list
,这个时候由于域名发生变化,浏览器会根据响应头中的信息来判断是否接受这个域名响应的数据。在没有做跨域配置或其他相关操作的情况下,浏览器都是会拒接接受。
如何来解决呢?如果让前端和后端配合的话,用jsonp
的方式比较多,但是这样貌似有点麻烦。还有一种方式就是通过nginx的配置来解决。这种解决方案称作Cors
。
Cors
解决方案配置:
location /list {
if($http_origin ~ http://(.*).itcrud.com ){
# 表示通过判断
add_header Access-Control-Allow-Origin $http_origin;
}
}
通过在响应头上添加Access-Control-Allow-Origin
来指定允许跨域请求的域名。上面说浏览器会根据响应头信息判断,就是根据这个属性。
防盗链
原创辛辛苦苦画的流程图,写的博客,或者共享的一些资源,被别人拿去直接用,还不标明资源的来源,这是对原创的不尊敬。为了防止这样的事情发生,很多网站都对自己的一些资源文件做了保护,避免被盗用。
防盗链的思想:
- 让资源只能在指定的页面内显示
- 资源不能单独来取或者下载
解决方法:
location ~ /(.*)\.png$ { # 保护png图片不被下载
valid_referers *.itcrud.com;
if($invalid_referer){
return 404; # 这里可以给出提示,让其跳转到自己的网站获取,更友好
}
}
配置很简单,代码的内容就不多解释了。
缓存
这里的缓存并不是nginx本身的缓存,而是通知浏览器缓存,并给定缓存的时间。
配置内容:
location ~ /(.*)\.png$ { # 让浏览器缓存png图片
expires 10s; # 缓存时间为10秒(单位:s=秒,m=分钟,h=小时,d=天)
}
这个时候如果在同一个页面一直刷新,10秒内获取图片都是走的缓存,不会请求到服务器,节省服务器的带宽。
压缩
请求页面的时候会有很多如css
、js
、html
等静态文件,这个时候就可以使用压缩的方式,对这些文件进行压缩,让响应出去的数据包更小,速度快,同时节省了带宽资源。
配置如下:
location ~ /(.*)\.(html|css|js|jpg|jpeg|gif)$ {
gzip on; # 开启gzip压缩,默认是off关闭。
}
这是基础的配置,一般还会加上一下几个配置:
-
gzip_types application/javascript text/css image/jpeg image/gif;
:用于指定需要压缩的文件类型 -
gzip_min_length 100K;
:指定进行压缩操作的文件最小值,如果文件本身比较小的话,就没有必要去压缩,因为服务端和浏览器端在压缩和解压过程是要耗费CPU资源的 -
gzip_buffers 4 8K
:设置压缩响应的缓冲块的大小和个数 -
gzip_comp_level 1
:压缩水平,默认值为1。取值范围为1-9,取值越大压缩比率越大,但是对CPU的消耗也就越高
说明:一般对图片类文件不做压缩操作,因为压缩的效率很低,反而消耗性能。