ajax跨域的解决方案

达人科技 2016-12-23 13:29

公司要做一个活动页面，在其过程中发现所有的接口，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请求，也会自动给你转换成get;

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

2、damain 方法

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

document.domain = 'a.com'

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

下面是修改的域名指向：

#127.0.0.1  localhost127.0.0.1   公司.com

之后打开本地localhost,就要用修改后域名来访问。

3、postMessage

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

这里假设，iframe的Id为 ‘iframe’；

在iframe里面的js里要写上

var message = 'date';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的数据了。

以上就是我常用的几种方式，希望对大家有所帮助!!

写的不好、不对的地方还望大家指出！！

本文为头条号作者发布，不代表今日头条立场。