ajax同源跨域问题总结

 前言：今天写一个rest接口调用的时候，幸运的碰到了一个ajax跨域限制的问题，赶紧上网了解了一下，然后再写个博客。分享一下我的所学，开心。

    原文：https://zhuanlan.zhihu.com/p/28562290

为什么会有跨域问题？

我想大家开始也会存在疑问：为什么会有跨域问题呢？它到底有什么作用呢？它又是什么所导致的呢？

首先是浏览器的同源策略导致的跨域问题，这里同源策略又分为以下两种：

        1、DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的。

        2、XMLHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求。

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

这时又有疑问了：为什么要有同源策略呢？即然是同源策略导致的跨域，那么为什么就一定要有同源策略呢？其实，这主要是基于安全的考虑。

        相信很多人都知道CSRF(跨站请求伪造)攻击。而AJAX同源策略就是用来防止CSRF的，因为我们平时发起的每一次HTTP请求都会带上请求地址对应的cookie，所以就可以做如下攻击：

        1、用户登录了自己的银行页面mybank.com，mybank.com向用户的cookie中添加用户标识。

        2、用户浏览了恶意页面evil.com/index.jsp。执行了页面中的恶意AJAX请求代码。

        3、evil.com/index.jsp向mybank.com发起AJAX HTTP请求，请求会默认把mybank.com对应cookie也同时发送过去。

        4、银行页面从发送的cookie中提取用户标识，验证用户无误，response中返回请求数据。

        5、而且由于Ajax在后台执行，用户无法感知这一过程。

DOM同源策略也一样，如果iframe之间可以跨域访问，可以这样攻击：

        1、做一个假网站，里面用iframe嵌套一个银行网站mybank.com。

        2、把iframe宽高啥的调整到页面全部，这样用户进来除了域名，别的部分和银行的网站没有任何区别。

        3、这时如果用户输入账户密码，我们的主网站可以跨域访问到mybank.com的dom节点，

            就可以拿到用户的输入了，那么就完成了一次攻击。

因此，有了跨域限制之后，我们才能更安全的上网了。

跨域的解决方式

        这里主要讲的是跨域资源共享、jsonp实现跨域、服务器代理三种方式，另外我也有看到说将浏览器以不安全启动的方式也可以实现跨域，但感觉这种方式没有什么实际的意义，不过知道有这样一种方式就好了。

        跨域资源共享(CORS)

        “跨域资源共享”（Cross-origin resource sharing）。对于这个方式，阮一峰老师总结的文章比较好，可以深入去了解一下跨域资源共享CORS详解。

           1、对于客户端，我们还是正常使用xhr对象发送ajax请求。

                唯一需要注意的是，我们需要设置我们的xhr属性withCredentials为true,不然的话，cookie是带不过去的哦，设置：xhr.withCredentials = true;

            2、对于服务器，需要在response.header中设置如下两个字段:

                Access-Control-Allow-Origin:yourhost.com

                Access-Control-Allow-Credentials:true

            这样，我们就可以跨域请求接口了。

        JSONP实现跨域

         基本原理就是通过动态创建script标签，然后利用src属性进行跨域。

// 定义一个fun函数
function fun(fata) {
    console.log(data);
};
// 创建一个脚本，并且告诉后端回调函数名叫fun
var body = document.getElementsByTagName('body')[0];
var script = document.gerElement('script');
script.type = 'text/javasctipt';
script.src = 'demo.js?callback=fun';
body.appendChild(script);

        返回的js脚本，直接会执行。所以就执行了事先定义好的fun函数了，并且把数据传入了进来。

        fun({"name":"name"})

        当然，这个只是一个原理演示，实际情况下，我们需要动态创建这个fun函数，并且在数据返回的时候销毁它。

        因为在实际使用的时候，我们用的各种ajax库，基本都包含了jsonp的封装，不过我们还是要知道一下原理，不然就不知道为什么jsonp不能发post请求了。

      服务器代理

       浏览器有跨域限制，但是服务器不存在跨域问题，所以可以由服务器请求所要域的资源再返回给客户端。

       document.domain来跨子域

        对于主域名相同，而子域名不同的情况，可以使用document.domain来跨域，这种方式非常适用于iframe跨域的情况，直接看例子吧，比如a页面地址为a.yourhost.com b页面为 b.yourhost.com。这样就可以通过分别给两个页面设置document.domain = yourhost.com来实现跨域。之后，就可以通过parent或者window['iframename']等方式去拿到iframe的window对象了。

        

       使用window.name进行跨域

        window.name跨域同样是受到同源策略限制，父框架和自框架的src必须指向同一域名。

        window.name的优势在于，name的值在不同的页面(或者不同的域名),加载后仍然存在，除非你显示的更改。并且支持的长度到2M。

        

//a页面的代码
<script type="text/javascript">
   iframe = document.createElement('iframe');
   iframe.style.display = 'none';
   var state = 0;

   iframe.onload = function() {
     if(state === 1) {
         var data = iframe.contentWindow.name;
         console.log(data);
         iframe.contentWindow.document.write('');
         iframe.contentWindow.close();
         document.body.removeChild(iframe);
     } else if(state === 0) {
         state = 1;
         iframe.contentWindow.location = 
         'http://m.zhuanzhuan.58.com:8887/b.html';
     }
   };
   document.body.appendChild(iframe);
</script>

//b页面代码
<script type="text/javascript">
   window.name = "hello";
</script>

      使用postMessage实现页面之间通信

      信息传递除了客户端与服务器之前的传递，还存在以下几个问题：

• 页面和新开的窗口的数据交互。
• 多窗口之间的数据交互。
• 页面与所嵌套的iframe之间的信息传递。

        window.postMessage是一个HTML5的api，允许两个窗口之间进行跨域发送消息。这个应该就是以后解决dom跨域通用方法了，具体可以参照MDN。

补充： 其实还有一些方法，比如window.name和location.hash。就很适用于iframe的跨域，不过iframe用的比较少了，所以这些方法也就有点过时了。

这些就是我对跨域的了解了，实际情况下，一般用cors，jsonp等常见方法就可以了。不过遇到了一些非常规情况，我们还是需要知道有更多的方法可以选择的