认识达内从这里开始

下面的内容建立在对Nginx配置有基本认知的情况下。如果没有的话，请先从网上查阅资料(例如基本配置)做简单了解。如果你想本地安装Nginx，强烈建议采用源码编译安装，这样后续添加模块更为方便。

快速实现简单的访问限制

经常会遇到希望网站让某些特定用户的群体(比如只让公司内网)访问，或者控制某个uri不让人访问。Nginx配置如下：

解决跨域

在众多的解决跨域方式中， 都不可避免的都需要服务端进行支持， 使用Nginx可以纯前端解决请求跨域问题。 特别是在前后端分离调试时， 经常需要在本地起前端工程， 接口希望拉取服务端的实际数据而不是本地的mock。 而如果本地程序直接访问远程接口， 肯定会遇到跨域问题。现在前端成熟的做法，一般是把node proxy server集成进来。事实上，用Nginx同样可以解决问题，甚至可以应用于线上。

为了绕开浏览器的跨域安全限制，现在需要将请求的域名改成#。同时约定一个url规则来表明代理请求的身份，然后Nginx通过匹配该规则，将请求代理回原来的域。Nginx配置如下：

#请求跨域，这里约定代理请求url path是以/apis/开头

location ^~/apis/ {

# 这里重写了请求，将正则匹配中的第一个()中$1的path，拼接到真正的请求后面，并用break停止后续匹配

这样其实是通过nginx，用类似于hack的方式规避掉了浏览器跨域限制，实现了跨域访问。

适配PC与移动环境

现在很多网站都存在PC站和H5站两个站点，因此根据用户的浏览环境自动切换站点是很常见的需求。Nginx可以通过内置变量$http_user_agent，获取到请求客户端的userAgent，从而知道用户处于移动端还是PC，进而控制重定向到H5站还是PC站。

以笔者本地为例，pc端站点是#，H5端是#。pc端Nginx配置如下：

合并请求

前端性能优化中重要一点就是尽量减少http资源请求的数量。通过nginx-http-concat模块(淘宝开发的第三方模块，需要单独安装)用一种特殊的请求url规则(例子：#/??1.js,2.js,3.js )，前端可以将多个资源的请求合并成一个请求，后台Nginx会获取各个资源并拼接成一个结果进行返回。例如上面的例子通过一个请求将1.js,2.js,3js三个js资源合并成一个请求，减少了浏览器开销。

本地server #为例，static/js文件夹下有三个文件，文件内容很简单，分别为：

图片处理

在前端开发中，经常需要不同尺寸的图片。现在的云储存基本对图片都提供有处理服务(一般是通过在图片链接上加参数)。其实用Nginx，可以通过几十行配置，搭建出一个属于自己的本地图片处理服务，完全能够满足日常对图片的裁剪/缩放/旋转/图片品质等处理需求。要用到ngx_http_image_filter_module模块。这个模块是非基本模块，需要安装。

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!更多内容请添加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。