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秒内获取图片都是走的缓存,不会请求到服务器,节省服务器的带宽。

压缩

请求页面的时候会有很多如cssjshtml等静态文件,这个时候就可以使用压缩的方式,对这些文件进行压缩,让响应出去的数据包更小,速度快,同时节省了带宽资源。

配置如下:

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的消耗也就越高

说明:一般对图片类文件不做压缩操作,因为压缩的效率很低,反而消耗性能。