跨域原因及解决方法

跨域：

只要协议、域名、端口有任何一个不同，都被当作是不同的域，之间的请求就是跨域操作。

造成跨域的两种策略：

==浏览器的同源策略==导致跨域，同源策略又分为以下两种:

1. DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的。
2. XmlHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求。
   注意：跨域限制访问，其实是浏览器的限制。理解这一点很重要！！！

为什么要有跨域限制

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

解决方案：

1. jsonp 需要目标服务器配合一个callback函数。

2. window.name+iframe 需要目标服务器响应window.name。

3. window.location.hash+iframe 同样需要目标服务器作处理。

4. html5的 postMessage+ifrme 这个也是需要目标服务器或者说是目标页面写一个postMessage，主要侧重于前端通讯。

5. CORS 需要服务器设置header ：Access-Control-Allow-Origin。
   http://www.ruanyifeng.com/blog/2016/04/cors.html
   对于客户端，我们还是正常使用xhr对象发送ajax请求。
   唯一需要注意的是，我们需要设置我们的xhr属性withCredentials为true，不然的话，cookie是带不过去的哦，设置： xhr.withCredentials = true;
   对于服务器端，需要在 response header中设置如下两个字段:
   Access-Control-Allow-Origin: http://www.yourhost.com
   Access-Control-Allow-Credentials:true

6. nginx反向代理 可以不用目标服务器配合，不过需要你搭建一个中转nginx服务器，用于转发请求。详见：https://www.jianshu.com/p/94adf23105aa