跨域问题以及解决

一、什么是跨域问题？

1.1、什么是跨域？

    跨域的产生来源于现代浏览器所通用的‘同源策略’，所谓同源策略，是指只有在地址的：

       1、协议名 https，http

       2、域名 http://a.study.cn http://study.cn

       3、端口名 http://study.cn:8080/json/jsonp/jsonp.html study.cn/json/jsonp/jsonp.html

均一样的情况下，才允许访问相同的cookie、localStorage或是发送Ajax请求等等。若在不同源的情况下访问，就称为跨域。

**举例如下**：

825922-20151028230107904-1333387603.png

这个时候在浏览器上会报错:

825922-20151028230247091-934044692.png

这个就是同源策略的保护,如果浏览器对javascript没有同源策略的保护,那么一些重要的机密网站将会很危险~

请求地址                                     形式                  结果
http://study.cn/test/a.html                同一域名,不同文件夹      成功
http://study.cn/json/jsonp/jsonp.html      同一域名,统一文件夹      成功
http://a.study.cn/json/jsonp/jsonp.html    不同域名,文件路径相同    失败
http://study.cn:8080/json/jsonp/jsonp.html 同一域名,不同端口        失败
https://study.cn/json/jsonp/jsonp.html     同一域名,不同协议　　     失败

1.2、什么情况下会产生跨域安全问题？

  1、浏览器限制 ： 如何屏蔽掉浏览器限制就不会产生问题。

  2、跨域 ： 不满足同源策略。

  3、XMLHttpRequest请求 ： 发送的是XMLHttpRequest请求。

二、为什么要做跨域限制？

**安全！**同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说 Web 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

它的核心就在于它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时，它们应该只被允许访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源。

所谓同源是指：**域名、协议、端口相同**。

如果浏览器没有同源策略，会存在什么样的安全问题呢。

下面从 DOM 同源策略和 XMLHttpRequest 同源策略来举例说明：

如果没有 DOM 同源策略，也就是说不同域的 iframe 之间可以相互访问，那么黑客可以这样进行攻击：

做一个假网站，里面用 iframe 嵌套一个银行网站 http://mybank.com。
把 iframe 宽高啥的调整到页面全部，这样用户进来除了域名，别的部分和银行的网站没有任何差别。
这时如果用户输入账号密码，我们的主网站可以跨域访问到 http://mybank.com 的 dom 节点，就可以拿到用户的账户密码了。

如果 XMLHttpRequest 同源策略，那么黑客可以进行 CSRF（跨站请求伪造）攻击：

用户登录了自己的银行页面 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 在后台执行，用户无法感知这一过程。

因此，有了浏览器同源策略，我们才能更安全的上网。

三、如何解决跨域

**3.1、解决思路：**

        1、浏览器限制：不现实。

        2、XMLHttpRequest请求：不发送这个类型的请求，JSONP，不建议。

        3、跨域：建议。

              支持跨域：被调用方返回结果带上某些信息告诉浏览器支持该域名调用。

              隐藏跨域：调用方调用某个代理，代理将域名转到同一个域名，浏览器看到的结果是同一个域名。

3.2、实战：

        1、去除浏览器限制：

              --args --disable-web-security  --user-data-dir=D:\chrome

        2、JSONP解决跨域：

                 JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。浏览器限制了XMLHttpRequest ，那么绕过它，弄个JSONP出来。

                 演变背景：

                  **1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准；**

                  **2、不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如