• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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跨域的完美解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    您可能感兴趣的文章:
    • jQuery.ajax 跨域请求webapi设置headers的解决方案
    • IE9 IE8 ajax跨域问题的快速解决方法
    • 使用Nginx 反向代理来避免 ajax 跨域请求的方法
    • Python的Django应用程序解决AJAX跨域访问问题的方法
    • Ajax跨域问题的解决办法汇总(推荐)
    • 深入浅析Jsonp解决ajax跨域问题
    • Ajax 跨域如何实现
    上一篇:Ajax实现模拟关键字智能匹配搜索效果
    下一篇:Ajax 实现加载进度条
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    Ajax跨域的完美解决方案 Ajax,跨域,的,完美,解决方案,