一、前言

二、Nginx实现Http缓存

2.1 理论

Nginx作为服务端最先处理网络请求的中间件，有一定的缓存功能，缓存的是真实的tomcat的响应，缓存如果命中，nginx就直接返回，不用去访问后面的tomcat了。

CDN的全称是Content Delivery Network，即内容分发网络。

创建并配置缓存的路径（在centos上创建目录，在 conf/nginx.conf 上配置创建的目录）

2.2 实践

第一步，先创建并配置缓存的路径（在centos上创建目录，在 conf/nginx.conf 上配置创建的目录）

第二步，server location 块中，配置使用缓存

proxy_set_header 添加请求头 给idea上的tomcat，一般存放 浏览器发过来的网络信息，用来给tomcat看，即发送给后台真实服务器的请求头

add_header 添加响应头 给浏览器，一般存放是否命中缓存这些信息，即响应给客户端（浏览器）时需要添加的头信息

第三步，开始用

第一次请求

nginx上产生了缓存文件

第二次访问，时间没变，响应头中为hit，表示命中缓存

对于 $upstream_cache_status 有这些取值

基本就是 hit 命中，miss 和 expired 没命中，其中，miss没命中，expired过期了

2.3 第三方插件：ngx_cache_purge

nginx可以提供手动 删除缓存 的方式，就是在 url 里面加一个特定 路径名，识别到这个路径名，就删除缓存，即使用户 误操作 也没有关系。

理解即可，不是nginx自带，不常用。

第一步，下载安装 ngx_cache_purge
第二步，配置 server location
唯一注意： proxy_cache_purge 缓存名 和 缓存key 要和前面完全匹配

第三步，生成缓存，清空缓存，再次访问，就无法命中缓存了。

三、Nginx实现动静分离

3.1 静态资源和动态资源

静态资源：系统运行的时候，内容不会改变的，js css 图片，怎么运行都不会变
动态资源：系统运行的时候，内容会改变的

缓存和页面静态化：nginx缓存指的是url，这是nginx自带的技术。电商网站中，商品详情页对于包含复杂数据量的页面，做页面静态化，提高响应效率，是开发人员将动态页面静态化，是另一码事。
相同点是，都提高响应速度。

3.2 实践

第一步，先配置好 conf/nginx.conf目录

对于这些后缀名的问题，会放到下面的static目录下。

第二步，写好接口

第三步，访问静态文件：

可以访问到 192.168.44.81/gupao.png，就是被上面的配置文件 localhost:80 匹配上，png也被匹配上，所以 直接访问 static目录下的静态文件

第四步，启动tomcat，访问接口，访问到index.html 这个动态文件。

四、Nginx实现数据压缩

4.1 理论

nginx内置gzip实现文件压缩，在 浏览器 --> nginx --> tomcat 例子中，nginx作为一个中转转发服务器，有一定的压缩功能，对于 tomcat 响应体给nginx，nginx可以将收到的响应体用gzip压缩，然后响应给浏览器，浏览器一般都有gzip解压缩功能，nginx的压缩一般可以压缩size达到一半以上，可以提高网络传输效率，当然，整个压缩解压缩的过程，对于客户透明的。

也是写在 conf/nginx.conf 配置文件中的，配置在http块内，与server块同级

常见配置参数如下：

4.2 实践

先关闭nginx压缩，即在 conf/nginx.conf 中设置gzip off;

启动 nginx 和 tomcat，访问nginx转发的到tomcat，此时js文件大小为 272kb

然后 在 conf/nginx.conf 中设置gzip on; 再次访问，返回回来的js文件 为90.4kb ，压缩了一半以上。

看一下报文，request中浏览器是请求了gzip压缩的，respose中 Content Encoding 也确实是 nginx返回的 使用gzip 的压缩结果。

注意：一定要浏览器要求使用gzip压缩，nginx启动gzip压缩，两个条件都满足，如果浏览器不要求压缩 ，和nginx没开启压缩，都是不可以的。

五、Nginx实现跨域访问

5.1 同域

同域：协议、域名/子域名/ip、端口 三个都相同，如下：

浏览器同源策略：不允许一个域的脚本，去操作另外一个域的数据，去获得另一个域的返回数据，对于这样的操作，浏览器会进行拦截，拦截另外一个域返回给一个域的响应体。

5.2 跨域请求

这里有一种跨域场景，在idea上启动tomcat1 和 tomcat2，将nginx部署到centos上，tomcat1启动的html中，script的脚本访问 nginx ，这是一个跨域请求，虽然可以访问成功，且nginx收到这个请求后，再次访问（就是转发）给idea上启动tomcat2（虽然此时也是跨域，但是这不是script脚本，无妨），tomcat2响应体给了nginx，然后nginx响应体给tomcat1，此时无法成功，来自nginx的响应体会被浏览器拦截，因为tomcat1通过script做跨域请求。

注：不是 tomcat1 的请求不能跨域传递给nginx，也不是nginx不发送响应给tomcat1，而是 这个跨域响应被 浏览器 拦截了。

浏览器的拦截信息如下，这就是 跨域拦截。

5.3 四种处理跨域请求的方式

5.3.1 jsonp

方式1：jsonp 方式，

理由：js中，script标签的src属性，img标签的src属性，link超链接标签的ref属性，这三个东西，都是不会受到浏览器的同源的限制的，jsonp就是利用js自带三个属性这样处理的。

劣势：只能帮助处理script标签中的，get请求的跨域处理，不能post

实现：在前端执行跨域请求的script块中，将dataType设置为JSONP，并设置好 jsonpCallback ，这个callback，是后端使用@RestController注解返回的是字符串，但是

如下，前端代码修改

后端返回的时候修改，
将 return json.toJSONString(); 变为 return “successCallback(” + json.toJSONString() + “)”;

5.3.2 方法或类上加上@CrossOrigin注解，或者全局加上配置

理由：在目标的方法或类上加上@CrossOrigin注解，直接给一个通行证，便是某些特定ip或域名跨域访问 目标接口方法，就是通过 Access-Control-Allow-Origin 属性中配置，默认为* 表示，在目标接口方法上配置上，任何一个ip或域名都可以跨域访问 目标接口方法。

实践：两种方式
方式1：@CrossOrigin 放到Controller层的 方法上或者放到类上
方式2：直接配置全局的bean

url 可以配所有的，也可以匹配指定的，origin同理。

注意：不能重复，不能配置两次，配置了全局@CrossOrigin的就不要配置局部的（类或方法上或nginx上），否则浏览器上出现如下错误。

5.3.3 巧用nginx：将跨域变成nginx转发，这样对浏览器来说，就变成了同域请求

浏览器上访问 192.168.44.181(即centos ip地址)/file/get ，被nginx拦截，转发给 192.168.44.1:9096（即tomcat1）/file/get，然后这个接口就是idea上的tomcat1处理的，这个tomcat1 return new ModelAndView(“index.html”) 这个index.html 里面的 script 标签访问 192.168.44.181(即centos ip地址)/time/query，被nginx拦截，转给给 192.168.44.1:9097（即tocmat2）/time/query

最后，tomcat2 响应给 nginx ，nginx 响应给 tomcat1，tomcat1 再响应给 nginx，nginx 响应给浏览器。

理由：为什么不会被浏览器拦截？
对于浏览器来说， 192.168.44.181(即centos ip地址)/file/get 请求和 script中的 192.168.44.181(即centos ip地址)/time/query ，是同域的，当然不会拦截 响应体。

至于 nginx 上转发给 tomcat1 是跨域的， nginx 上转发给 tomcat2 是跨域的，这不是在前端script中完成的，浏览器不管。

原理：之前是 浏览器 -> tomcat1 ->(script中跨域请求) nginx -> tomcat2
现在是
浏览器 -> nginx -> tomcat1 ->(因为浏览器上一次访问的是nginx，所以这个script这里对于浏览器来收，同域) nginx -> tomcat2

即，之前是 浏览器直接访问tomcat1，现在是把 conf/nginx.conf 配置好，把tomcat1也挂到nginx上

劣势：conf/nginx.conf 多维护了一个 tomcat1 的配置。

5.3.4 巧用nginx，在目标接口方法上配置上通行证@CrossOrigin

add_header表示在nginx的响应头上加上字段给浏览器，这里就是加上 通行证@CrossOrigin 给浏览器，浏览器看到通行证就会让，核对 跨域请求的源ip，就会让这个响应通过。

重申：不是 tomcat1 的请求不能跨域传递给nginx，也不是nginx不发送响应给tomcat1，而是 这个跨域响应被 浏览器 拦截了。


注意：nginx参数设置中比较容易混淆的点

proxy_set_header：对于nginx发送给tomcat的请求，添加请求头 给idea上的tomcat，一般存放 浏览器发过来的网络信息，用来给tomcat看，即发送给后台真实服务器的请求头

add_header：nginx接收tomcat的响应，然后自己响应浏览器的请求， 添加响应头 给浏览器，一般存放是否命中缓存这些信息，即响应给客户端（浏览器）时需要添加的头信息

六、尾声

Nginx，从基本原理到开发实践（二），完成了。

天天打码，天天进步！！