跨域问题

一、概念

突破同源策略的限制，在两个不同的域之间实现资源交互。

二、分类

(1):使用ajax引发的跨域问题：
当调用ajax时：调用ajax发送请求的页面所在的域，和被请求页面所在域不一致。
(2):类似页面嵌入ifream引起的跨域问题：
当操作ifream内引入的元素时：ifream所属页面的域，和ifream引入页面的域不一致。

三、解决跨域的方法：
解决跨域的方法有Jsonp,Cors,降域，postMessage四种方法，但是最常用的方法就是前两种方法。下面我们分别来了解一下这四种方法。
(1):Jsonp(因为使用URL引入资源，所以仅支持get请求)

产生：

我们大家都知道，ajax直接请求普通文件存在跨域无权限访问的问题，不管你是动态页面，静态页面等等，只要是跨域请求，一律是不允许的。那么这时我们就想到了web页面上调用js文件时不受是否跨域的影响，不仅如此，我们还发现凡是拥有”src”属性的标签都拥有跨域能力，所以我们就可以在远程服务器上设法把数据装进js格式的文件里。

要点：

✔︎允许用户传递一个callback参数给服务器。
✔︎然后服务器返回数据是会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数开自动处理返回数据了。

那么问题来了，怎么让远程js知道它应该调用的本地函数的名称？
答：只要服务端提供的js脚本时动态生成的就可以了。
栗子：

//提供jsonp服务的url地址，不管是什么类型，最终返回值一般为js代码。code参数告知服务器信息；callback参数告知浏览器本地回调函数名称，所有查询结果会放进去。
var url = 'http://mp.blog.csdn.net/mdeditor/index/78795195?code=night&callback=message';
//创建script标签，设置其属性
var script = document.creatElement('script');
script.setAttribute('src',url);

大家可以点击这里查看。

(2):Cors(除了get要求方法外也支持其他方法)
enenen~~~~这里我对cors的产生不太了解，所以就不对其进行说明了。
那么我们就来了解一下cors的过程。

✔︎当使用XMLHttpRequest发送请求时，如果浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin(说明协议，域名，端口号)。
✔︎后台检测Origin的源是否在许可范围内，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin。
✔︎浏览器判断该响应头中是否包含Origin的值。
✔︎如果包含，浏览器会处理响应，前端就可以拿到响应数据。

总之，就是浏览器匹配请求头和响应头，如果符合要求便可以拿到数据，否则无法拿到数据。整个过程由浏览器自动完成。

使用：

前端：正常使用ajax发送请求。
服务端：若确定接受请求，则在返回结果中加入响应头。

由于后面的两种方法不是经常使用，所以只给大家简单的介绍一下。

(3):降域：
条件：

仅限于两个相同的主域名。

栗子：

A页面的域为:a.mengying.com;
B页面的域为:b.mengying.com;
那么我们就可以给这两个页面都加入document.domain = ‘mengying.com’，在此mengying.com就是这两个页面的主域名。

(4)postMessage
条件：

当两个域名完全不同时。
过程：
A页面向B页面发送一条消息，B页面会接收到该消息，如果B页面需要该消息，则监听message,否则置之不理。

嗯，那么到这里4种方法就已经简单的描述完了。

～～～～语言表达能力不是特别好，写这么多真的是头都快炸了！！！
休息一下！！！！