欢迎使用CSDN-markdown编辑器

前提:何为跨域

---

js的同源策略，也就是不允许a.com域下的js去调用b.com或者c.a.com域下的对象。而且与此同时不允许进行跨域的情况也包括同一个域名，不同的端口，同一个域名，不同的协议，这些情况网上比较常见。

解决方案

---

第一种:document.domain+iframe

业务需求: fans系统和weapp系统的系统更新消息的解决方案目前采用的就是该解决方案。具体做法如下：

目标: 因为该需求是fans要调用weapp，所以fans的js要调用weapp系统中的window对象，来操作localStorge对象，进而更新其中的message_count属性。

• 首先需要在weapp系统的static下建立一静态页面，例如crossdomain.html。该页面中所要做的工作是设置crossdomain.html页面的domain为fans和weapp的共有的父域名，也就是dev.com；
• 其次在fans中通过iframe来引用weapp的页面，例如a.html，添加方法有两种，如下

    var hm = document.createElement("iframe");
    hm.src = "{{ weapp_host }}/static/crossdomain.html";
    hm.style.display = 'none'
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
   

或者

<iframe src="xxx"></iframe>
**不过推荐使用前者**

• 之后再a.html页面中设置fans的domain为dev.com。这样便可以保证fans和weapp拥有相同的域名。
• 最后便可以在a.html页面中通过window.iframe[0]对象来调用weapp中的localStorge对象来操作message_count的值。

原理：通过构造相同的域名来操作对象的js对象。

注意事项:

• 1.一旦fans有漏洞，便会对weapp造成影响。
• 1. 不要将域的更改扩大到全局，尽量在小范围能控制域，以免对其他部分造成影响。
• 1. 要注意被引入页面中和引入页面中js的执行顺序，否则会出现一些方法未被定义等一些其他影响。
     

     ---

第二种：jsonp

业务需求: weapp直接修改fans系统中用户的密码。

目标: 在weapp中通过页面操作采用ajax来对fans用户进行密码修改。具体做法如下

首先weapp采用如下代码进行调用:

$.ajax({ 
    async:false, 
    url: http://跨域的dns/document!searchJSONResult.action, 
    type: "GET", 
    dataType: 'jsonp', 
    jsonp: 'jsoncallback', 
    data: qsData, 
    timeout: 5000, 
    beforeSend: function(){ 
        //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了
}