Ajax跨域的完美解决方案

 更新时间:2016年12月23日 10:35:40   投稿:mrr  
公司要做一个活动页面,在其过程中发现所有的接口,ajax请求跨域。这里对跨域做个简单介绍以及提供几种解决办法

公司要做一个活动页面,在其过程中发现所有的接口,ajax请求跨域。这里对跨域做个简单介绍以及提供几种解决办法。

  由于浏览器实现的同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,所以AJAX是不允许跨域的。这里提供自己常用的三种方法:

1、jsonp访问

  JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问;

实现方式

  1)

<script type="text/javascript"> 
  $.ajax({ 
    url:url, 
    dataType:'jsonp', 
    data:'', 
    jsonp:'callback', 
    success:function(result) { 
    }, 
  }); 
</script> 

  2)

$.getJSON(url+"?callback=?", 
  function(result) { 
  });

注:1】 jsonp只能用get请求,哪怕你用了post请求,也会自动给你转换成post;

  2】 jsonp 不仅可以用来获取数据,也可以用来提交数据。

2、damain 方法

  在主域相同,子域不同的情况下可以用这种方法,修改域名指向,让他们指向同一域名,这种办法也只能解决主域相同而二级域名不同的情况,两个毫无关系的网址是不可以用这种方法的;

document.domain = 'a.com'

注:在实际开发中,很多人会在本地调试接口,localhost的域名和公司的域名完全不一样,所有用了domain这种办法也无法产生效果,解决办法是修改c盘里的host文件,把本地地址localhost修改成公司域名或者公司二级域名,然后这种方法就可以使用了。

下面是修改的域名指向:

#127.0.0.1  localhost
127.0.0.1   公司.com

3、postMessage

  postMessage是h5的一个新功能之一,由于我们是一家做h5游戏的公司,不可避免的要嵌套iframe,方便数据提交等。

  这里假设,iframe的Id为 ‘iframe';

  在iframe里面的js里要写上

var message = 'date';<br>if (parent.document.getElementById(‘iframe‘)) {
          //捕获iframe
          var iframe = parent.document.getElementById(‘iframe').contentWindow;
          //发送消息
          parent.postMessage(message, "*");
        }

  在iframe外面的js里要写上

window.addEventListener('message',function(e){
      },false);

  然后就可以拿到message的数据了。

以上所述是小编给大家介绍的Ajax跨域的完美解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 全面解析Ajax和jsonp使用总结

    全面解析Ajax和jsonp使用总结

    这篇文章主要介绍了全面解析Ajax和jsonp使用总结 的相关资料,需要的朋友可以参考下
    2017-10-10
  • 使用加载图片解决在Ajax数据加载中页面出现短暂空白的问题(推荐)

    使用加载图片解决在Ajax数据加载中页面出现短暂空白的问题(推荐)

    在项目中用ajax异步获取数据后有时会因为数据问题或者网络问题,页面一直显示空白,现在用加载图片来过渡这种状态,具体实例代码通过本文一起学习吧
    2016-12-12
  • AJAX 异步传输数据的问题

    AJAX 异步传输数据的问题

    暂时把script中的‘+’都用‘-’代替,index += 1;改成index -= -1;呵呵,以后有人看到这段自动生成的诡异脚本,不知道会作何感想,但现在也只能如此。
    2008-12-12
  • javascript 拖动_cookie_ajax等

    javascript 拖动_cookie_ajax等

    比较实用的js拖动效果代码。类的写法不错,是个不错的应用
    2008-06-06
  • IE6中ajax aborted错误请求中断解决方法

    IE6中ajax aborted错误请求中断解决方法

    给a标签绑定了一个click事件用来触发ajax请求,在IE6中,请求时常会被中断,在其他浏览器中都一切正常,具体解决方法如下,感兴趣的朋友可以参考下
    2013-06-06
  • 基于firefox实现ajax图片上传

    基于firefox实现ajax图片上传

    这篇文章主要介绍了基于firefox实现ajax图片上传,大家都知道在FF下使用ajax是件挺困难的事情,今天给大家介绍的是完美解决这个问题的方法,小伙伴可以参考下。
    2015-05-05
  • Ajax传Jsond Mvc后台接收实例

    Ajax传Jsond Mvc后台接收实例

    Ajax传Jsond Mvc后台接收,前后台实现代码如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
    2013-06-06
  • 浅谈Ajax请求与浏览器缓存

    浅谈Ajax请求与浏览器缓存

    下面小编就为大家带来一篇浅谈Ajax请求与浏览器缓存。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • Ajax实现异步加载数据

    Ajax实现异步加载数据

    这篇文章主要为大家详细介绍了Ajax实现异步加载数据,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • Ajax的小贴士使用小结

    Ajax的小贴士使用小结

    Ajax的小贴士使用小结...
    2007-10-10

最新评论