公司要做一个活动页面,在其过程中发现所有的接口,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跨域的完美解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对尊托云数网站的支持!
在大三的时候,一直就想搭建属于自己的一个博客,但由于各种原因,最终都不了了...
目录 读者基础 ?微服务架构梳理 https://www.coder4.com/homs_online/ ? ? 读者...
本文实例为大家分享了javascript实现倒计时提示框的具体代码,供大家参考,具体...
本文实例为大家分享了vue实现按钮切换图片的具体代码,供大家参考,具体内容如下...
这5个PHP编程中的不良习惯,一定要改掉 PHP世界上最好的语言! 测试循环前数组是...
目录 1. C语言文件接口(库函数) 1.1 fopen 1.2 fclose 1.3 fread 1.4 fwrite 1.5...
今天看到个不错的网页播放器,感觉不错,大家可以测试 我写的一个播放器网页: ...
首先到这里下载其源码。里面东西挺多的,我们基本上可以把它放到两个文件夹就是...
由于固态驱动器(SSD)的速度比传统的硬盘驱动器(HDD)快得多,并且价格越来越便宜...
MFC项目在vs2017编译正常无报错,但是升级vs2019后一打开项目就报如下错误。 项...