什么是跨域
跨域是指跨域名的访问，以下情况都属于跨域：
如果域名和端口都相同，但是请求路径不同，不属于跨域，如：
/item
/goods
为什么有跨域问题？
跨域不一定会有跨域问题。
因为跨域问题是浏览器对于ajax请求的一种安全限制：一个页面发起的ajax请求，只能是与当前页同域名的路径，这能有效的阻止跨站攻击。
因此：跨域问题 是针对ajax的一种限制。
但是这却给我们的开发带来了不变，而且在实际生成环境中，肯定会有很多台服务器之间交互，地址和端口都可能不同，怎么办？
解决跨域问题的方案：
目前比较常用的跨域解决方案有3种：
1.Jsonp
最早的解决方案，利用script标签可以跨域的原理实现。
限制：
1)需要服务的支持
2)只能发起GET请求
2.nginx反向代理
思路：
利用nginx反向代理把跨域为不跨域，支持各种请求方式
缺点：需要在nginx进行额外配置，语义不清晰
3.CORS
规范化的跨域请求解决方案，安全可靠。
优势：
1)在服务端进行控制是否允许跨域，可自定义规则
2)支持各种请求方式
缺点：
1)会产生额外的请求
2)在服务端进行控制是否允许跨域，可自定义规则
3)支持各种请求方式
今天我们会用cors的跨域方案。
什么是cors
CORS是一个W3C标准，全称是"跨域资源共享"(Cross-origin resource sharing)。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
浏览器端：
目前，所有浏览器都支持该功能(IE10以下不行)。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。
服务端：
CORS通信与AJAX没有任何差别，因此你不需要改变以前的业务逻辑。只不过，浏览器会在请求中携带一些头信息，我们需要以此判断是否运行其跨域，然后在响应头中加入一些信息即可。这一般通过过滤器完成即可。
原理有点复杂
浏览器会将所有请求分为两类，其处理方案略有差异：简单请求、特殊请求。
简单请求
只要同时满足以下两大条件，就属于简单请求。
(1) 请求方法是以下三种方法之一：
HEAD
GET
POST
(2)HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
当浏览器发现发现请求是简单请求时，会在请求头中携带一个字段：Origin.
Origin
Origin中会指出当前请求属于哪个域(协议+域名+端口)。服务会根据这个值决定是否同意本次请求，也就是否允许其跨域。
如果服务器允许跨域，需要在返回的响应头中携带下面信息：
Access-Control-Allow-Origin: Access-Control-Allow-Credentials: trueContent-Type: text/html; charset=utf-8
Access-Control-Allow-Origin：可接受的域，是一个具体域名或者*，代表任意
Access-Control-Allow-Credentials：是否允许携带cookie，默认情况下，cors不会携带cookie，除非这个值是true
注意：
如果跨域请求要想操作cookie，需要满足3个条件：
服务的响应头中需要携带Access-Control-Allow-Credentials并且为true。
浏览器发起请求需要指定withCredentials 为true
响应头中的Access-Control-Allow-Origin一定不能为*，必须是指定的域名
特殊请求
不符合简单请求的条件，会被浏览器判定为特殊请求,比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。。
特殊请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求(preflight)。
预检请求
浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。
一个“预检”请求的Demo：
OPTIONS /cors HTTP/1.1Origin: Access-Control-Request-Method: PUTAccess-Control-Request-Headers: X-Custom-HeaderHost: Accept-Language: en-USConnection: keep-aliveUser-Agent: Mozilla/5.0...
上面代码中，你会发现多了一个自定义头信息X-Custom-Header。
加上这个，浏览器就会自动识别为特殊请求，就自动发出一个"预检"请求，要求服务器确认可以这样请求。
与简单请求相比，除了Origin以外，多了两个头：
Access-Control-Request-Method：接下来会用到的请求方式，比如PUT
Access-Control-Request-Headers：会额外用到的头信息
预检请求的响应
服务器收到预检请求，检查了多出的两个字段后，如果许可跨域，会发出响应：
HTTP/1.1 200 OKDate: Tue,14Jul20:58:25GMTAccess-Control-Allow-Origi: Access-Control-Allow-Credential: trueAccess-Control-Allow-Methods: GET, POST, PUTAccess-Control-Allow-Headers: X-Custom-HeaderAccess-Control-Max-Age: 1728000Content-Type: text/html; charset=utf-8Content-Encoding: gzipContent-Length: 0Keep-Alive: timeout=2, max=100Connection: Keep-AliveContent-Type: text/plain
除了Access-Control-Allow-Origin和Access-Control-Allow-Credentials以外，这里又额外多出3个头：
Access-Control-Allow-Methods：允许访问的方式
Access-Control-Allow-Headers：允许携带的头
Access-Control-Max-Age：本次许可的有效时长，单位是秒，过期之前的ajax请求就无需再次进行预检了
如果浏览器得到上述响应，则认定为可以跨域，后续就跟简单请求的处理是一样的了。
与JSONP的比较
CORS与JSONP的使用目的相同，但是比JSONP更强大。
但是JSONP只支持GET请求。
CORS支持所有类型的HTTP请求。
JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。
(本期主题)
对于简单请求来说：
if ($request_method = 'GET') {add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';add_header'Access-Control-Expose-Headers''DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';}
上面的配置中：
Access-Control-Allow-Origin：
必须配置的字段，'*'表示接受任意域名的请求，也可以指定接受某一个域名的请求
Access-Control-Request-Headers：
如果浏览器请求包括Access-Control-Request-Headers字段，则在Nginx配置中也是必须的，是一个由逗号分隔的字符串
Access-Control-Expose-Headers：
可选配字段。CORS请求，
XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：
Cache-Control、
Content-Language、
Content-Type、
Expires、
Last-Modified、
Pragma。
如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。
上面的例子指定，
getResponseHeader('FooBar')可以返回FooBar字段的值
非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求(preflight)。
浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。
if ($request_method = 'OPTIONS') {add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; add_header 'Access-Control-Max-Age' 1728000; add_header 'Content-Type' 'text/plain charset=UTF-8'; add_header 'Content-Length' 0; return 204;}
Access-Control-Request-Method：
该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法
Access-Control-Max-Age：
用来指定本次预检请求的有效期，单位为秒其他参数参考简单请求即可
重启即可。
遇到的问题场景：在不同源的资源不能在当前域名下显示、调用。因为跨域。为了解决问题，所以这篇文章出来了。
参考文章：
《CORS on Nginx》：
https://enable-/server_nginx.html
