HTML跨域
传统跨域体式格局
JSONP跨域
说到传统跨域体式格局，JSONP是最普遍为人所知的情势了。
关于JS来讲，应用XMLHttpRequest没法要求非本域上的数据，然则却可以加载非本域的JS文件。
JSONP就是应用了这个所谓的“破绽”。
试想当我们在文档中插进去一个script标签，要求一个 JS 文件时，该JS文件的内容是直接挪用一个函数，
同时传入恰当的数据。则关于要领内部，就已可以经由历程参数的情势猎取传入的数据。以下所示：
此处的对象，就是传入的数据，而fun则是谁人函数。该函数实在可以是恣意函数名，只需在我们的window域下定义，也可以依据需求定义在其他处所。题目在于传入的数据怎样来呢？实在这些关于前端来讲完全不必管，只需让后端处理好后拼接成如上情势返回给我们即可。而fun内里放什么，则取决于你要对返回的数据做什么样的处理了。
别的，fun的函数名发起是伴同跨域接口一同传输给server，以让server来举行拼接出适宜的实行代码。完全代码以下：
document.domain
也许你会碰到如许的情况：我的网页内嵌了一个iframe，该iframe所援用的页面跟我本域不一样，此时我想修正iframe中的内容，该怎样办呢？
也许你以为可以经由历程contentWindow猎取iframe中的内容，但很可惜的是我们拿到这个contentWindow，却不能猎取到内里的属性与要领（H5最新属性postMessage除外，后面会说起）。
这是因为浏览器的同源战略制止了我们如许的操纵，因为它们分属差别的源。
此时就须要用到document.domain了，也就是我们只需将iframe中的document.domain设置成跟父页面雷同的值即可。
比方当 http://loliner.baidu.com/inde… 内嵌了 http://baidu.com/example.html ，此时我们只需将 index.html 的 document.domain 修正成 baidu.com即可完成与example.html通信。
然则题目来了，浏览器对document.domain的设置是有限定的，其只能设置成比自身域更高一级的域名，包括自身域。
比方存在http://b.a.com/index.html，则该页面 document.domain许可的值为
b.a.com
a.com
而c.b.a.com则是不许可的。且两个页面若要通信，则二者的主域必需雷同。
上例中，主域就为 baidu.com。
window.name
在一个窗口(window)的生命周期内，窗口载入的一切的页面都是同享一个window.name，每一个页面临window.name都有读写的权限。
以上是对window.name的定义。试想假如有两个差别域的页面依次被同一个窗口加载，那末关于这两个页面来讲，二者就可以同享window.name，从而完成通信。
怎样依次加载？应用window.location转变窗口的地点就可以够办到这一点。
比方，http://example.com/a.html 完全加载后，修正window.name为指定值。然后经由历程window.location将窗口定向到 http://loliner.com/b.html，此时b.html中window.name的值就为上一个页面中设置的值。
window.name的值只能是一个字符串，最大2M，但对我们来讲已够用了。假如你要通报对象或数组，举行JSON花样化即可。
然则，虽然如许完成了数据通信，然则我们不能往返如许切来切去，那怎样办呢？这时刻就可以够应用 iframe + contentWindow 了。
我们可以在 b.html 页面增加一个隐蔽的iframe，该iframe指向a.html，当a.html完全加载并修正了window.name以后，我们将iframe从新指向与b.html在同一个域名下的c.html，此时就可以够经由历程 iframe 的 contentWindow 猎取到 name 的值了。
完全代码以下：
H5跨域体式格局
window.postMessage
我们晓得在同一个页面嵌入多个iframe，每一个iframe的域都不一样时，虽然我们可以猎取iframe的window对象，却不能接见个中的属性和要领。但H5的最新属性postMessage除外，那末我们是不是可以在此应用如许的一个“破绽”来举行跨域呢？
答案是可以的。
我们只需在iframe中设置onmessage监听，然后在父级页面中猎取iframe的window对象，将父页面所要通报的信息经由历程window.postMessage发出即可。
完全代码以下：
起首要让iframe监听onmessage事宜。
接下来则是在父页面中猎取iframe的window对象并挪用postMessage通报信息。
注重，此处的postMessage所发送的音讯在低版本浏览器下只能为字符串，若要通报对象或数组，只能JSON花样化。
别的，第二个参数指的是域，示意你要将信息发送到哪一个域，参数花样为协定+主机+端口，实在跟上面所说document.domain的值是一回事。
CORS
在一切以上提到的跨域要领中，不得不说都是应用了大大小小的破绽来绕过同源战略。而无论怎样举行绕过，有一点可以肯定的是，WEB开辟当中确切须要跨域猎取资本。
所以，W3C为我们制订了 CORS 跨域接见机制。CORS关于开辟者来讲最大的优点就是，无需斟酌以什么样的体式格局绕过同源战略要求跨域资本，直接运用ajax即可。
那末谁去担任跨域的平安性呢？答案是由Server举行掌握。
Server在接收到要求的时刻，需推断要求泉源，假如该泉源正当，返回一般数据，同时须要在要求返转头response header中增加必要 CORS 字段。
关于浏览器来讲，若该要求的返转头信息中，包括该 CORS 字段，那末浏览器就会一般读取返回的信息，不然，就会抛出No ‘Access-Control-Allow-Origin’ header is present on the requested resource.制止跨域非常。
上面所说到的CORS字段，分为必需与可选：
Access-Control-Allow-Origin（必需）该服务器所许可跨域的源，假如为 * ，则示意许可一切源对该服务器举行要求。
发送要求的一方的域，必需包括在该值所指定的源内。
Access-Control-Allow-Credentials（可选）示意是不是许可发送cookie，该值为一个布尔值，默以为false。
Access-Control-Expose-Headers（可选）猎取response header中其他字段的值。
所以，简朴的说，CORS 形式中的跨域要求实在与前端开辟者已没有太大的关联，只需Server端掌握好接口数据，并按需写入CORS字段即可。
别的，CORS跨域要求可以分为简朴要求与庞杂要求。
简朴要求
关于简朴要求，浏览器直接发送CORS要求即可，跟上面所说流程一致。
HEAD、GET、POST都属于简朴要求。
庞杂要求
关于庞杂要求，则须要起首发出预检要求，推断是不是可以跨域，然后再发送实在要求。
PUT和DELETE，或Content-Type字段范例为application/json的都属于庞杂要求。
就现在来讲，JSONP 及 CORS 算是最经常使用的跨域情势了，也能满足我们的绝大部分需求。
相关于JSONP，CORS W3C划定的规范跨域体式格局，功用更壮大，平安性也更好。
JSONP只支撑GET要求，而 CORS 支撑多种要求。
JSONP 没有域的观点，CORS 则有准确的指定哪些域可以猎取资本。
CORS 将域的平安性治理完全交给Server治理，越发平安。
Flash跨域
Flash跨域也有多种情势，此处只引见最经常使用的 crossdomain.xml 战略文件 形式及allowDomain 权限授与。
corssdomain.xml 跨域战略文件
与 CORS 庞杂要求一样，Flash在举行跨域要求时，默许起首会发送预检要求，推断本域是不是正当。该预检要求会去跨域要求的根目录猎取 corssdomain.xml 文件，该文件包括了跨域战略信息。比方最主要的一点，就是通知Flash哪些域可以跨域要求该服务器。
举个栗子，http://baidu.com/a.html下有某swf文件要向http://loliner.com/要求资本。此时会经由以下步骤：
Flash发明要求须要跨域，则起首要求http://loliner.com/crossdomai…文件；
若crossdomain.xml文件能一般返回，则剖析个中的战略，检察本域是不是正当；
若本域正当，则发送跨域要求；若不正当，则直接封杀要求。
此处注重，假如本域不法，Flash就会直接封杀了要求，那末我们在浏览器掌握台是捕捉不到该要求的，因为就没发出去。
那末Flash是怎样推断本域是不是正当的呢？我们先来看一下一个最简朴的corssdomain.xml文件构造。
一切的 crossdomain.xml 都以 <corss-domian-policy> 作为根节点，内里的每一个<allow-access-from>都为一个战略。
个中，键值 domain 示意许可跨域的源，此处就跟 CORS 的 Access-Control-Allow-Origin 字段一样了。
而 secure ，则示意要求是不是以加密举行传输。假如 corssdomain.xml 文件是从 https 协定下加载的，那末 secure 默以为 true。此时Flash若发明本域为非 https 协定，纵使 domain 正当，也会封杀要求。假如secure为false，则表明Flash可以发送非https加密过的要求。
Security.allowDomain 跨域权限授与
假如说引见 crossdomain.xml 文件时我们是以 Client 端为角度的，那末引见 Security.allowDomain 则必需以 Server 作为角度。
你能够会碰到以下情况，开辟了多个swf，它们之间相互依赖，但以差别的域宣布到网上。此时你只愿望某些特定的域才有权限去修正或挪用该swf中的属性及要领。那末此时，你就须要用到allowDomain要领对你所许可的域举行受权了。
以下是 allowDomain 的形貌：
许可指定的域中的 SWF 文件接见挪用了此要领的 SWF 文件中的对象和变量。
再举个栗子，http://a.com/a.swf 须要挪用及修正 http://b.com/b.swf 中的属性及要领。
那末，就必需在b.swf中挪用 Security.allowDomain(‘a.com’)以许可a.com域对自身举行接见。
别的，要注重非常主要的一点，Security.allowDomain跨域权限授与是不对称的。
也就是说，在上面的栗子中，只许可a.swf接见b.swf，但b.swf却不可以接见a.swf。
假如非要如许做，那末就在a.swf中对b.com举行权限授与。
其次，关于HTTPS来讲，纵然挪用了该要领，若试图应用在HTTP下的swf去修正HTTPS下的swf，此时也是不法的。因为这自身就不平安。
假如非要如许做，可以让HTTPS下的swf挪用Security.allowInsecureDomain()对HTTP域举行权限授与
跨域体式格局对照
反观 Flash 跨域与H5 CORS 跨域，虽然二者在情势上有所差别，但本质上都向着以下两个特性挨近：
先讯问，后要求；
平安性靠Server端来保护。
关于 CORS 简朴要求来讲，浏览器是不会举行预检要求发送的，如许一个要求搞定一切的事，却不肯定完全合理。因为关于浏览器来讲，我在没有晓得Server是不是以为我的要求正当前，就已抛出了大批的查询数据。这就有能够形成数据传输的冗余。
别的，假如因为开辟历程不当，频仍发送不正当的跨域要求，自身就是一个资本的糟蹋。
所以，才须要到庞杂要求。
而关于 Flash crossdomain.xml 这类体式格局（与 CORS 庞杂要求相似），就避免了频仍发送不正当的跨域要求，因为在crossdomain.xml返回之前，Flash是不会发送任何跨域要求，直接在当地就将其封杀。同时crossdomain.xml并不是每次跨域前都邑要求，其有一个有效期。
但若我自身只须要求一次数据，但Server因为营业沉重却给我返回一个巨大的crossdomain.xml，这反而又显得分歧理了。
