Js跨域解决方法总结

 

本文转载自网易博客

 

 

出于安全性的考虑，在AJAX应用中，浏览器通常都会限制跨域提交数据。但由于经常和其他部门有接口对接的业务需求，需要跨域获取数据。

IE对于跨域访问的处理是，弹出警告框，提醒用户。如果用户将该网站纳入可信任网站，或者调低安全级别，那么这个问题IE就不会在提醒你。
    FireFox等其它非微软的浏览器遇到跨域访问，则解决方案统一是拒绝访问。

Huodong.qq.com 下的网站前端要获取act.qzone.qq.com下的接口数据

有3种解决方法

1、服务器端做代理

       服务器端是没有跨域限制的，通过huodong服务器获取数据，提供给huodong.qq.com下的js使用，这样也就不存在跨域问题了。

      该方法的弊端很多，需要服务端获取QQ登录态、传递给接口，或者在huodong的服务上不支持动态的情况下（特殊情况）是无法解决的。

2、隐形的iframe + document.domain

设置 document.domain都为qq.com ，在活动的页面提交数据到iframe呈现，返回的方法调用当前页面的方法，如下

<div style="display: none">

<form id="formLog"action="http://act.qzone.qq.com/user_v3/freereg.php?domain&script&callback=parent.jsonCallBackAll&act_id=10458"method="post"target="foobar">

    <input type="hidden"name="post_blog"value="1"/>

 </form>

 <iframe id="foobarAll"name="foobar"style="display:none;"></iframe>

</div>

 1) 、 Js操作formLog提交编导  $("#formLog").submit();

 

 

 2) 、返回的数据格式如下：

 

 

 3) 、在huodong.qq.com页面中实现定义jsonCallbackAll方法

优点：支持post和get

缺点：只能在同一子域的情况下使用，如果是huodong .qq.com访问*.soso.com就不行了

3、动态创建script方法

原理：通过js动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了

推荐用jquery的jsonp方法来解决

  $.getJSON(" http://url/index.html?value"+value1+"&jsoncallback=?",
      function(json){
      if(json.属性名==值){
      // 执行代码
            }
   });

需要服务端返回的数据为json格式，在服务端输出的时候需要把获取的jsoncallback写上，输出如： jsoncallback（json数据） ；

优点：支持不同主域的跨域方式

缺点：不支持post方式。