细说跨域

1.原理

 什么是跨域

　　跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。

源(origin)指的是协议、域名、端口号，同源指的是在url中协议、域名、端口号均相同。那么同源策略是浏览器的一个安全功能，不同源的脚本在没有明确授权的情况下，不能读写对方资源。 

同源策略限制了一下行为：

• Cookie、LocalStorage 和 IndexDB 无法读取
• DOM 和 JS 对象无法获取
• Ajax请求发送不出去

 ps：对于像 img、iframe、script 等标签的 src 属性是特例，它们是可以访问非同源网站的资源的。

2.常用的几种跨域处理方法：

 1、JSONP

 2、CORS策略

 3、document.domain+iframe的设置

 4、HTML5的postMessage

 5、使用window.name来进行跨域

3.细说CORS策略

　　我们都知道由于浏览器的同源策略导致ajax无法进行跨域传输，那么CORS这种方法就就是突破浏览器限制来进行传输。当数据发送给对方域名的时候，对方已经收到，但是在返回的时候被浏览器给阻挡，我们可以写一串类似于身份证的字符串，通过浏览器的预检，从而达到数据的传输。

　　随着技术的发展，现在的浏览器可以支持主动设置从而允许跨域请求，即：跨域资源共享（CORS，Cross-Origin Resource Sharing），其本质是设置响应头，使得浏览器允许跨域请求。

　　CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

　　实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信

#* 简单请求 OR 非简单请求
#条件：
1、请求方式：HEAD、GET、POST
2、请求头信息不超出一下这几个字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type 对应的值是以下三个中的任意一个
application/x-www-form-urlencoded
multipart/form-data
text/plain

#注意：同时满足以上两个条件时，则是简单请求，否则为复杂请求

* 简单请求和非简单请求的区别？

#简单请求：一次请求
#非简单请求：两次请求，在发送数据之前会先发一次请求用于做“预检”，只有“预检”通过后才再发送一次请求用于数据传输。

　非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。

　　非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

* 关于“预检”

　　浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

#- 请求方式：OPTIONS
#- “预检”浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段，
只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错
#- 如何“预检”
#    => 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过
        Access-Control-Request-Method
#     => 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过
        Access-Control-Request-Headers

方法：在前端做处理或在服务端做相关处理