CORS解决跨域问题（及Nginx配置）

概念

同源策略

[same origin policy] 是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。 同源策略是浏览器安全的基石。

什么是源？
源[origin]就是协议、域名和端口号。例如：http://www.baidu.com:80这个URL。

什么是同源？
若地址里面的协议、域名和端口号均相同则属于同源。

同域：域名（父域名和子域名都相同），端口，协议都相同。

跨域：非同域的请求。在同源策略的限制下，非同源的网站之间不能发送 AJAX 请求。

1. 跨域指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器对JavaScript 施加的安全限制。
2. 浏览器在执行脚本的时候，都会检查这个脚本属于哪个页面，即检查是否同源，只有同源的脚本才会被执行；而非同源的脚本在请求数据的时候，浏览器会报一个异常，提示拒绝访问。

注意：
跨域不是请求发不出去，而是服务端正常返回结果后被浏览器拦截返回结果。（浏览器为了防止非同源的请求 拿到服务器的返回数据结果）

哪些操作不受同源策略限制？
页面中的链接，重定向以及表单提交是不会受到同源策略限制的；
跨域资源的引入是可以的。但是JS不能读写加载的内容。如嵌入到页面中的<script src=“…”></script>，<img>，<link>，<iframe>等

如何跨域

• 降域
  可以通过设置 document.damain=‘a.com’，浏览器就会认为它们都是同一个源。想要实现以上任意两个页面之间的通信，两个页面必须都设置documen.damain=‘a.com’。

• JSONP跨域
  CORS与JSONP的使用目的相同，但是比JSONP更强大。
  JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

• CORS 跨域

解决办法

跨域资源共享 CORS
因为是目前主流的跨域解决方案。所以这里多介绍点。

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

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。IE8+：IE8/9需要使用XDomainRequest对象来支持CORS。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。 因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

跨域有2种请求，浏览器对于2种请求的处理不一样

简单请求

在CORS出现前，发送HTTP请求时在头信息中不能包含任何自定义字段，且 HTTP 头信息不超过以下几个字段：

1. 主动设置的头信息不能超过以下字段：
   Accept
   Accept-Language
   Content-Language
   Last-Event-ID
   Content-Type(只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain)

注意：这里的头信息是指我们主动设置的头部信息，在查看请求过程时会发现 浏览器会在头信息里设置Origin等信息，这些不算主动设置的。

2. 请求方法只能是：HEAD，GET，POST

简单请求：
浏览器会在 请求头信息 里增加一个Origin字段，表明本次请求的来源，若服务器返回的头部信息里需包含 Access-Control-Allow-Origin，并包含Origin 则浏览器正常返回数据，否则出现跨域错误。

如果需要携带cookie，请求时需设置(比如XMLHttpRequest.withCredentials = true）。若返回头部信息有 Access-Control-Allow-Credentials：true，则浏览器会正常返回数据，否则浏览器会拦截结果报 跨域错误。

注意：服务器会正常返回数据，只是浏览器拦截了结果。

服务器在返回头信息里设置（必须）：

Access-Control-Allow-Origin: Origin

Eg：Access-Control-Allow-Origin：127.0.0.1:80

如果想设置匹配所有的Origin且不带cookie的，可以设置：

Access-Control-Allow-Origin: *