学习：什么是浏览器跨域？以及了解实现跨域的七种方法

一、什么是跨域

1.定义**

跨域是指从一个域名的网页去请求另一个域名的资源。它是由浏览器的同源策略造成的，是浏览器为了提高网站的安全性对JavaScript施加的限制，使浏览器不能执行其他网站的脚本。跨域的更加严格的定义是：只要 协议，域名，端口有任何一个的不同，就被当作是跨域。

2.同源策略**

同源策略又分为以下两种

• DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的。
  XmlHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求。
• 只要协议、域名、端口有任何一个不同，都被当作是不同的域，之间的请求就是跨域操作

我们主要讲第二种，垮域的产生来源于现代浏览器所通用的‘同源策略’。在发送ajax请求时，只有在当前页面地址与请求地址的协议+域名+端口号相同时才允许访问，否则会被拦截。

http://www.a.com/a.js 和 http://www.a.com/b.js 同一域名，非跨域
http://www.a.com:8000/a.js 和 http://www.a.com:8081/b.js 同一域名，不同端口(8081/8000)，跨域
http://www.123.com/index.html 和 http://www.456.com/server.php 主域名不同(123/456)，跨域http://abc.123.com/index.html 和 http://def.123.com/server.php 子域名不同(abc/def)，跨域）http://www.123.com/index.html 和 https://www.123.com/server.php 协议不同（http/https），跨域
请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

二、为什么需要限制浏览器跨域访问？

主要是出于安全的考虑
1

• 用户访问www.mybank.com ，登陆并进行网银操作，这时cookie啥的都生成并存放在浏览器
• 用户突然想起件事，并迷迷糊糊地访问了一个邪恶的网站 www.xiee.com
• 这时该网站就可以在它的页面中，拿到银行的cookie，比如用户名，登陆token等，然后发起对www.mybank.com 的操作。
• 如果这时浏览器不予限制，并且银行也没有做响应的安全处理的话，那么用户的信息有可能就这么泄露了。
  2
  AJAX同源策略主要用来防止CSRF攻击。如果没有AJAX同源策略，相当危险，我们发起的每一次HTTP请求都会带上请求地址对应的cookie，那么可以做如下攻击：
• 用户登录了自己的银行页面 http://mybank.com，http://mybank.com向用户的cookie中添加用户标识。
• 用户浏览了恶意页面 http://evil.com。执行了页面中的恶意AJAX请求代码。
• http://evil.com向http://mybank.com发起AJAXHTTP请求，请求会默认把http://mybank.com对应cookie也同时发送过去。
• 银行页面从发送的cookie中提取用户标识，验证用户无误，response中返回请求数据。此时数据就泄露了。
• 而且由于Ajax在后台执行，用户无法感知这一过程。
  3
  DOM同源策略也一样，如果iframe之间可以跨域访问，可以这样攻击：
• 做一个假网站，里面用iframe嵌套一个银行网站 http://mybank.com
• 把iframe宽高啥的调整到页面全部，这样用户进来除了域名，别的部分和银行的网站没有任何差别。
• 这时如果用户输入账号密码，我们的主网站可以跨域访问到http://mybank.com的dom节点，就可以拿到用户的输入了，那么就完成了一次攻击。

三、解决跨域的方法

1.跨域资源共享（CORS）

CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。
CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。只需要在后台中加上响应头来允许域请求。

对于客户端，我们正常使用xhr对象发送ajax请求。需要注意的是，需要设置xhr的属性withCredentials为true，不然的话，cookie是带不过去的，设置：
xhr.withCredentials = true
对于服务器端，需要在 response header中设置如下两个字段:
Access-Control-Allow-Origin: http://www.yourhost.com
Access-Control-Allow-Credentials:true
这样就可以跨界请求接口了。

具体的话，可以深入了解阮一峰老师的一篇文章：
http://www.ruanyifeng.com/blog/2016/04/cors.html

2. jsonp实现跨域

JSONP是JSON with Padding（填充式json）的简写。JSONP包含两部分：回调函数和数据
回调函数是当响应到来时要放在当前页面被调用的函数。
数据就是传入回调函数中的json数据，也就是回调函数的参数了。
基本原理就是通过动态创建script标签,然后利用src属性进行跨域。例子：

function handleResponse(response){
   
 console.log('The responsed data is: '+response.data);
}
var script = document.createElement('script');
script.src = 'http://www.baidu.com/json/?callback=handleResponse';
document.body.insertBefore(script, document.body.firstChild);
/*handleResonse({"data": "zhe"})*/
//原理如下：
//当我们通过script标签请求时
//后台就会根据相应的参数(json,handleResponse)
//来生成相应的json数据(handleResponse({"data": "zhe"}))
//最后这个返回的json数据(代码)就会被放在当前js文件中被执行
//至此跨域通信完成

3.通过修改document.domain来跨子域（ 只有在主域相同的时候才能使用该方法）

浏览器都有一个同源策略，其限制之一就是第一种方法中我们说的不能通过ajax的方法去请求不同源中的文档。 它的第二个限制是浏览器中不同域的框架之间是不能进行js的交互操作的。不同的框架之间是可以获取window对象的，但却无法获取相应的属性和方法。
比如，有一个页面，它的地址是http://www.example.com/a.html ， 在这个页面里面有一个iframe，它的src是http://example.com/b.html, 很显然&