跨域整理 1. 跨域资源共享 cors
对于web开发来讲，由于浏览器的同源策略，我们需要经常使用一些hack的方法去跨域获取资源，但是hack的方法总归是hack。直到w3c出了一个标准－cors－”跨域资源共享”（cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出xmlhttprequest请求，从而克服了ajax只能同源使用的限制。
首先来说 cors 需要浏览器和服务端同时支持的，对于兼容性来说主要是ie10+，其它现代浏览器都是支持的。
http://caniuse.com/#feat=cors
使用 cors 跨域的时候其实和普通的 ajax 过程是一样的，只是浏览器在发现这是一个跨域请求的时候会自动帮我们处理一些事，比如验证等等，所以说只要服务端提供支持，前端是不需要做额外的事情的。
两种请求 cors 的请求分两种，这也是浏览器为了安全做的一些处理，不同情况下浏览器执行的操作也是不一样的，主要分为两种请求，当然这一切我们是不需要做额外处理的，浏览器会自动处理的。
1. 简单请求（simple request） 只要同时满足以下两大条件，就属于简单请求。
条件
1) 请求方法是以下三种方法中的一个：headgetpost2）http的头信息不超出以下几种字段：acceptaccept-languagecontent-languagelast-event-idcontent-type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
过程 对于简单的跨域请求，浏览器会自动在请求的头信息加上 origin 字段，表示本次请求来自哪个源（协议 + 域名 + 端口），服务端会获取到这个值，然后判断是否同意这次请求并返回。
// 请求get /cors http/1.1origin: http://api.qiutc.mehost: api.alice.comaccept-language: en-usconnection: keep-aliveuser-agent: mozilla/5.0...
1.服务端允许 如果服务端许可本次请求，就会在返回的头信息多出几个字段：
// 返回access-control-allow-origin: http://api.qiutc.meaccess-control-allow-credentials: trueaccess-control-expose-headers: infocontent-type: text/html; charset=utf-8
这三个带有 access-control 开头的字段分别表示：
access-control-allow-origin 必须。它的值是请求时origin字段的值或者 * ，表示接受任意域名的请求。 access-control-allow-credentials； 可选。它的值是一个布尔值，表示是否允许发送cookie。默认情况下，cookie不包括在cors请求之中。设为true，即表示服务器明确许可，cookie可以包含在请求中，一起发给服务器。 再需要发送cookie的时候还需要注意要在ajax请求中打开withcredentials属性： var xhr = new xmlhttprequest(); xhr.withcredentials = true; 需要注意的是 ，如果要发送cookie，access-control-allow-origin就不能设为 * ，必须指定明确的、与请求网页一致的域名。同时，cookie依然遵循同源政策，只有用服务器域名设置的cookie才会上传，其他域名的cookie并不会上传，且原网页代码中的 document.cookie 也无法读取服务器域名下的cookie。 access-control-expose-headers 可选。cors请求时，xmlhttprequest对象的 getresponseheader() 方法只能拿到6个基本字段：cache-control、content-language、content-type、expires、last-modified、pragma。如果想拿到其他字段，就必须在access-control-expose-headers里面指定。上面的例子指定， getresponseheader('info') 可以返回info字段的值。 2.服务端拒绝 当然我们为了防止接口被乱调用，需要限制源，对于不允许的源，服务端还是会返回一个正常的http回应，但是不会带上 access-control-allow-origin 字段，浏览器发现这个跨域请求的返回头信息没有该字段，就会抛出一个错误，会被 xmlhttprequest 的 onerror 回调捕获到。
这种错误无法通过 http 状态码判断，因为回应的状态码有可能是200
2.非简单请求 条件 出了简单请求以外的cors请求。非简单请求是那种对服务器有特殊要求的请求，比如请求方法是put或delete，或者content-type字段的类型是application/json。
过程 1）预检请求 非简单请求的cors请求，会在正式通信之前，增加一次http查询请求，称为”预检”请求（preflight）。
浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些http动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的xmlhttprequest请求，否则就报错。
预检请求的发送请求：
options /cors http/1.1origin: http://api.qiutc.meaccess-control-request-method: putaccess-control-request-headers: x-custom-headerhost: api.qiutc.comaccept-language: en-usconnection: keep-aliveuser-agent: mozilla/5.0...
“预检”请求用的请求方法是options，表示这个请求是用来询问的。头信息里面，关键字段是origin，表示请求来自哪个源。除了origin字段，”预检”请求的头信息包括两个特殊字段。
access-control-request-method 该字段是必须的，用来列出浏览器的cors请求会用到哪些http方法，上例是put。 access-control-request-headers
该字段是一个逗号分隔的字符串，指定浏览器cors请求会额外发送的头信息字段，上例是x-custom-header。
预检请求的返回：
http/1.1 200 okdate: mon, 01 dec 2008 01:15:39 gmtserver: apache/2.0.61 (unix)access-control-allow-origin: http://api.qiutc.meaccess-control-allow-methods: get, post, putaccess-control-allow-headers: x-custom-headercontent-type: text/html; charset=utf-8content-encoding: gzipcontent-length: 0keep-alive: timeout=2, max=100connection: keep-alivecontent-type: text/plain
access-control-allow-methods必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次”预检”请求。
access-control-allow-headers 如果浏览器请求包括access-control-request-headers字段，则access-control-allow-headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在”预检”中请求的字段。 access-control-max-age 该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求。 2）浏览器的正常请求和回应 一旦服务器通过了”预检”请求，以后每次浏览器正常的cors请求，就都跟简单请求一样，会有一个origin头信息字段。服务器的回应，也都会有一个access-control-allow-origin头信息字段。 参考： 《跨域资源共享 cors 详解》 http://www.ruanyifeng.com/blog/2016/04/cors.html
)
阮大神的文章，复制粘贴了不少。
2. jsonp jsonp = json + padding
其实对于常用性来说，jsonp应该是使用最经常的一种跨域方式了，他不受浏览器兼容性的限制。但是他也有他的局限性，只能发送 get 请求，需要服务端和前端规定好，写法丑陋。
它的原理在于浏览器请求 script 资源不受同源策略限制，并且请求到 script 资源后立即执行。
主要做法是这样的：
在浏览器端：
首先全局注册一个callback回调函数，记住这个函数名字（比如：resolvejson），这个函数接受一个参数，参数是期望的到的服务端返回数据，函数的具体内容是处理这个数据。
然后动态生成一个 script 标签，src 为：请求资源的地址＋获取函数的字段名＋回调函数名称，这里的获取函数的字段名是要和服务端约定好的，是为了让服务端拿到回调函数名称。（如： www.qiute.com?callbackname=resolvejson ）。
function resolvejosn(result) { console.log(result.name);}var jsonpscript= document.createelement(script);jsonpscript.type = text/javascript;jsonpscript.src = http://www.qiute.com?callbackname=resolvejson;document.getelementsbytagname(head)[0].appendchild(jsonpscript);
服务端
在接受到浏览器端 script 的请求之后，从url的query的callbackname获取到回调函数的名字，例子中是 resolvejson 。
然后动态生成一段javascript片段去给这个函数传入参数执行这个函数。比如：
resolvejson({name: 'qiutc'});
执行服务端返回这个 script 之后，浏览器端获取到 script 资源，然后会立即执行这个 javascript，也就是上面那个片段。这样就能根据之前写好的回调函数处理这些数据了。
在一些第三方库往往都会封装jsonp的操作，比如 jquery 的 $.getjson 。
3. document.domain 一个页面框架（iframe／frame）之间（父子或同辈），是能够获取到彼此的window对象的，但是这个 window 不能拿到方法和属性（尼玛这有什么用，甩脸）。
// 当前页面域名 http://blog.qiutc.me/a.html