第五章 Nginx其他功能合集笔记

一、跨域处理

问题由来：浏览器拒绝执行其它域名下的ajax运作

如果浏览器在static.enjoy.com对应的html页面内，发起ajax请求偷盗www.enjoy.com域名下的内容来填充自己的页面，整个互联网秩序将混乱。为了防止这种混乱，W3C组织制定了浏览器安全规范，即html页面发起的ajax请求仅限于同域名后端范围，跨越域名的ajax请求不得执行，此谓跨域问题。

常见的跨域方案：jsonp、 document.domain + iframe 跨域---对业务有侵入

当前访问地址：http://static.chj.com//index.html

对应的页面js代码如下：

<script type="text/javascript">
$.ajax({  
 url:"http://test.chj.com/order/enjoy/getPage",  
 type:"GET",
 url:"http://test.chj.com/order/enjoy/delOrder",
 type:"DELETE",
 async :false,  
 success:function(data){  
 $("#testcors").html(data);  
 }  
 });
</script>

结果：当前访问页面域名与ajax的目标域名不一致，浏览器将拒绝执行请求，浏览器控制台打印错误如下图所示：

而在日常工作中，我们自己有多个子系统，避免不了要有跨越子系统的ajax请求，此时，我们希望自己内部的各个子系统不必有这种跨域限制。

1、Jsonp的解决之道

w3c制定的规则不允许ajax跨域请求，却允许script标签发起跨域请求，具体实现如下：

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>  // 这里跨域是 允许的
<script type="text/javascript">
$.ajax({  
 url:"http://test.chj.com/order/enjoy/getPage",  // 这里跨域是 不允许的
 type:"GET",
 url:"http://test.chj.com/order/enjoy/delOrder",  // 这里跨域是 不允许的
 type:"DELETE",
 async :false,  
 success:function(data){  
 $("#testcors").html(data);  
 }  
 });
</script>

因此，有人便扩展的script标签src源可以跨域的用法，来得到跨域名的请求信息，这便是jsonp的解决办法。jsonp的方法有其不美的地方，主要是两点：

1）jsonp只能解决GET类的请求，其它类型的请求，script标签无法做到。

2）使用jsonp的方式，对应的后台程序必须对结果进行改造，将返回值做一个函数式包装，这对业务开发有较大侵入性，增加开发人员负担。

2、cors方案的解决之道

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）,它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服AJAX只能同源使用的限制。

W3C制定跨域限制的本意，是防止页面领域安全混乱，即防止A公司不经B公司同意，使用ajax盗取B公司的服务内容。出于这个本意，W3C改进了跨域的方案，即：如果B公司是同意将自己的内容分享给A公司的，跨域限制可放开，此方案即CORS方案，如下图：

nginx配置跨域操作：

简单请求：

浏览器在跨源AJAX请求的头信息之中，自动在添加一个Origin字段（本次请求来自哪个源 ）。

服务器根据这个值，在许可范围内，则在头信息包含 Access-Control-Allow-Origin 。

对于比较简单的http请求（GET、POST、HEAD类型），无须浏览器来问，nginx服务器直接在响应头部，加入同意跨域的信号即可：

#是否允许请求带有验证信息

add_header Access-Control-Allow-Credentials true;

#允许跨域访问的域名,可以是一个域的列表，也可以是通配符*