作为一个前端，不论工作还是面试，跨域问题都是我们避不开的难点，所以我想写篇文章总结下跨域问题的正确的解决方式。

跨域问题的由来

       跨域问题的始作俑者--------------------浏览器的同源策略/SOP（Same origin policy）（这个网站有详细的同源策略讲解），因为同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。大犀牛那本书的第13章 336页对同源策略进行了讲解。通俗来说，同源策略是对Javascript代码能够操作哪些Web内容的一条完整的安全限制。当Web页面使用多个<iframe>元素或者打开其他浏览器窗口的时候，这一策略就会发挥作用，即Javascript脚本只能读取和所属文档来源相同的窗口和文档。如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。

源是什么？

       我们在浏览器地址栏看到的形如“https://www.jianshu.com/writer#/notebooks/6808749/notes/46657675”这样的URL就是这个源即因特网资源标准化名称，这个源就是浏览器寻找信息时所需的资源位置，正如某个城市中你家的门牌号。
        URL通用格式：
        <scheme>://<user>:<password>@<host>:<port>/<path>;<param>?<query>#<flag>  

        URL分为三部分：
        1.  http/https----------------------------是URL方案（scheme），告诉Web客户端如何访问资源，会告知负责解析URL的应用程序用什么协议；
        2. www.jianshu.com---------------服务器的位置，告知Web客户端源位于何处，即主机、端口
        3. /writer---------------------------资源路径，说明了请求的是服务器上哪个特定的本地资源。

        其中前两条即“协议+域名+端口”组成了我们所谓的源，即协议、域名、端口三者都相同，就为同源，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制了什么？

        1.) Cookie、LocalStorage 和 IndexDB 无法读取

        2.) DOM 和 Js对象无法获得

        3.) AJAX 请求不能发送

常见的跨域场景

同一域名，不同文件或路径 ：       

        http://www.baidu.com/a.js

        http://www.baidu.com/b.js                                                                   

        http://www.baidu.com/lab/c.js

        是否允许通信：不允许；

同一域名，不同端口 ：

         http://www.baidu.com:8000/a.js

         http://www.baidu.com/b.js     

         是否允许通信：不允许； 

同一域名，不同协议 ：

         http://www.baidu.com/a.js

         https://www.baidu.com/b.js                    

         是否允许通信：不允许； 

域名和域名对应相同ip：

        http://www.baidu.com/a.js

        http://192.168.4.12/b.js                      

        是否允许通信：不允许；   

主域相同，子域不同 ：

        http://www.baidu.com/a.js

        http://v.baidu.com/b.js                     

        是否允许通信：不允许； 

不同域名 ：  

        http://baidu.com/c.js

        http://www.baidu1.com/a.js

        http://www.baidu2.com/b.js                               

        是否允许通信：不允许； 

跨域解决方案

        1、 通过jsonp跨域

             在js中，我们不可以直接使用XMLHttpRequest请求不同域上的数据 ，但可以通过src这个属性在页面引入不同域上的js脚本文件，jsonp就是利用 这个特性。比如http://www.domain1.com/a.html，想访问http://www.domain2.com/data.php地址的json数据，a.html中可以这样写便能访问 http://www.domain2.com/data.php：

             <script>
              function  procDataFromDomain2(jsonData) {}
              </script>

              <script src="http://www.domain2.com/data.php?callback=procDataFromDomain2"> </script>

我们看到获取数据的地址后面还有一个callback参数，按惯例是用这个参数名，但是你用其他的也一样。当然如果获取数据的jsonp地址页面不是你自己能控制的，就得按照提供数据的那一方的规定格式来操作了。

因为是当做一个js文件来引入的，所以http://www.domain2.com/data.php返回的必须是一个能执行的js文件，所以这个页面的php代码可能是这样的:

最终那个页面输出的结果是:

        2、 document.domain + iframe跨域

        3、 location.hash + iframe

        4、 window.name + iframe跨域

        5、 postMessage跨域

        6、 跨域资源共享（CORS）

        7、 nginx代理跨域

        8、 nodejs中间件代理跨域

        9、 WebSocket协议跨域