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跨域的完美解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

时间: 2024-09-23 10:13:51

Ajax跨域的完美解决方案的相关文章

Ajax跨域查询完美解决通过$.getJSON()实现

原因:浏览器安全上做了限制,禁止ajax跨域获得数据. 解决方法:通过jquery提供的$.getJSON()可以跨域获得JSON格式的数据.优点:兼容性强. Java后台代码: 复制代码 代码如下: protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String callback =req.getParameter("cal

JQuery Ajax 跨域访问的解决方案_jquery

具体情况有: 一.本域和子域的相互访问: http://www.aa.com/和book.aa.com 二.本域和其他域的相互访问: http://www.aa.com/和http://www.bb.com/ 用 iframe 三.本域和其他域的相互访问: http://www.aa.com/和http://www.bb.com/ 用 XMLHttpRequest访问代理 四.本域和其他域的相互访问: http://www.aa.com/和http://www.bb.com/ 用 JS创建动态脚

Ajax跨域请求 JSON JSONP

同源策略和跨域-总结 目录: 1.同源策略 2.跨域 3.几种跨域技术   1.同源策略 什么叫同源? URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口相同,则表示他们同源.相反,只要协议,域名,端口有任何一个的不同,就被当作是跨域. e.g. 对于http://store.company.com/dir/page.html进行同源检测: URL 结果 原因 http://store.company.com/dir2/other.html 成功 仅路径不同 http://st

大数据量-ajax跨域请求较大数据

问题描述 ajax跨域请求较大数据 请求一个url返回数据量较大(约10M),格式是一个二维数组[[123][xxx]...]由于存在跨域问题,所以去servlet中发起请求,然而再返回前台时浏览器卡死了.那么怎么直接在ajax中去跨域请求这个地址并接收返回的数据?或者怎样在后台中接收返回前台但不会造成浏览器挂掉? 我在后端用httpclient去请求有问题. 解决方案 ajax跨域请求数据 解决方案二: 应该不是数据的问题,是你使用数据的代码有问题..10m数据要生成dom肯定比较耗时,如果是

Ajax跨域问题的解决办法汇总(推荐)_AJAX相关

本篇将讲述一个小白从遇到跨域不知道是跨域问题,到知道是跨域问题不知道如何解决,再到解决跨域问题,最后找到两种方法解决ajax 跨域问题的全过程. 不知是跨域问题 起 因是这样的,为了复用,减少重复开发,单独开发了一个用户权限管理系统,共其他系统获取认证与授权信息,暂且称之为A系统:调用A系统以B为例.在B系统 中用ajax调用A系统系统的接口(数据格式为json),当时特别困惑,在A系统中访问相应的url可正常回返json数据,但是在B系统中使用 ajax请求同样的url则一点儿反应都没有,好像

Ajax跨域问题的解决办法汇总(推荐)

本篇将讲述一个小白从遇到跨域不知道是跨域问题,到知道是跨域问题不知道如何解决,再到解决跨域问题,最后找到两种方法解决ajax 跨域问题的全过程. 不知是跨域问题 起 因是这样的,为了复用,减少重复开发,单独开发了一个用户权限管理系统,共其他系统获取认证与授权信息,暂且称之为A系统:调用A系统以B为例.在B系统 中用ajax调用A系统系统的接口(数据格式为json),当时特别困惑,在A系统中访问相应的url可正常回返json数据,但是在B系统中使用 ajax请求同样的url则一点儿反应都没有,好像

Javascript跨域和Ajax跨域解决方案

   最近做的一个项目中需要ajax跨域取得数据,如果是在本域中确实没有问题,但是放到二级域和其他域下浏览器直接就弹出提示框:"该页正在访问其控制范围之外的数据,这有些危险,是否继续" 1.什么引起了ajax跨域不能的问题ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告. 2.有什么完美的解决方案么?没有.解决方案有不少,但是只能是根据自己的实际情况来选择. 具体情况有:一.本域和子域的相互访问: w

Ajax跨域请求COOKIE无法带上的完美解决办法

1.原生ajax请求方式: 1 var xhr = new XMLHttpRequest(); 2 xhr.open("POST", "http://xxxx.com/demo/b/index.php", true); 3 xhr.withCredentials = true; //支持跨域发送cookies 4 xhr.send(); 2.jquery的ajax的post方法请求: $.ajax({ type: "POST", url: &qu

完美解决ajax跨域请求下parsererror的错误

ajax请求报parsererror错误是很宽泛的概念,很多情况下都报这个错, 在很多时候,即使ajax提交.返回都正常 XMLHttpRequest.status=200  (正常响应) XMLHttpRequest.readyState=4 (正常接收) ajax也会提示一个parseerror的错误. 出现这个错误,大都是不良书写习惯,或者语法不当造成的. 关于ajax的错误,请使用: error:function(XMLHttpRequest, textStatus, errorThro