ajax跨域问题的解决方案

2019-03-06 22:22|来源: 网络

1.何为跨域

跨域,就是在一个域名下访问另上一域名的资源,例如在www.656463.com上访问bbs.656463.com上的资源,就属于跨域


2.解决方案

找到一种解决方式

首先来看看在页面中如何使用jQuery的ajax解决跨域问题的简单版,

$(document).ready(function(){
   var url='http://localhost:8080/getGroupById?id=1&callback=?';
   $.ajax({
     url:url,
     dataType:'jsonp',
     processData: false, 
     type:'get',
     success:function(data){
       alert(data.name);
     },
     error:function(XMLHttpRequest, textStatus, errorThrown) {
       alert(XMLHttpRequest.status);
       alert(XMLHttpRequest.readyState);
       alert(textStatus);
     }});
   });

这样写是完全没有问题的,起先error的处理函数中仅仅是alert(“error”),为了进一步弄清楚是什么原因造成了错误,故将处理函数变为上面的实现方式。最后一行alert使用为;parsererror。百思不得其解,继续google,最终还是在万能的stackoverflow找到了答案,链接在这里。原因是jsonp的格式与json格式有着细微的差别,所以在server端的代码上稍稍有所不同。

比较一下json与jsonp格式的区别:

json格式:
{
    "message":"获取成功",
    "state":"1",
    "result":{"name":"工作组1","id":1,"description":"11"}
}

jsonp格式:

callback({
    "message":"获取成功",
    "state":"1",
    "result":{"name":"工作组1","id":1,"description":"11"}
})

看出来区别了吧,在url中callback传到后台的参数是神马callback就是神马,jsonp比json外面有多了一层,callback()。这样就知道怎么处理它了。于是修改后台代码。

后台java代码最终如下:

@RequestMapping(value = "/getGroupById")
  public String getGroupById(@RequestParam("id") Long id,
      HttpServletRequest request, HttpServletResponse response)
      throws IOException {
    String callback = request.getParameter("callback");
    ReturnObject result = null;
    Group group = null;
    try {
      group = groupService.getGroupById(id);
      result = new ReturnObject(group, "获取成功", Constants.RESULT_SUCCESS);
    } catch (BusinessException e) {
      e.printStackTrace();
      result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED);
    }
    String json = JsonConverter.bean2Json(result);
    response.setContentType("text/html");
    response.setCharacterEncoding("utf-8");
    PrintWriter out = response.getWriter();
    out.print(callback + "(" + json + ")");
    return null;
  }

注意这里需要先将查询结果转换我json格式,然后用参数callback在json外面再套一层,就变成了jsonp。指定数据类型为jsonp的ajax就可以做进一步处理了。

虽然这样解决了跨域问题,还是回顾下造成parsererror的原因。原因在于盲目的把json格式的数据当做jsonp格式的数据让ajax处理,造成了这个错误,此时server端代码是这样的:

@RequestMapping(value = "/getGroupById")
  @ResponseBody
  public ReturnObject getGroupById(@RequestParam("id") Long id,
      HttpServletRequest request, HttpServletResponse response){
    String callback = request.getParameter("callback");
    ReturnObject result = null;
    Group group = null;
    try {
      group = groupService.getGroupById(id);
      result = new ReturnObject(group, "获取成功", Constants.RESULT_SUCCESS);
    } catch (BusinessException e) {
      e.printStackTrace();
      result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED);
    }
    return result;
  }

至此解决ajax跨域问题的第一种方式就告一段落。

追加一种解决方式

追求永无止境,在google的过程中,无意中发现了一个专门用来解决跨域问题的jQuery插件-jquery-jsonp

有第一种方式的基础,使用jsonp插件也就比较简单了,server端代码无需任何改动。

来看一下如何使用jquery-jsonp插件解决跨域问题吧。

var url="http://localhost:8080/getGroupById?id=1&callback=?";
$.jsonp({
  "url": url,
  "success": function(data) {
    $("#current-group").text("当前工作组:"+data.result.name);
  },
  "error": function(d,msg) {
    alert("Could not find user "+msg);
  }
});

至此两种解决跨域问题的方式就全部介绍完毕。


本文链接:http://www.656463.com/article/533,转自:http://www.congmo.net/blog/2012/06/27/ajax-cross-domain/

相关问答

更多

ajax实现跨域重定向请求

关于Ajax跨域请求(GET)或Ajax跨域提交(POST),只需要在 Fikker 转向管理中添加相关配置,即可由 Fikker 代理来完成 Ajax 跨域操作即可。伪静态化就是将用户访问的静态地址(html)转换成网站可识别的动态地址(php,asp,jsp等),这个通过向 Fikker 的转向管理中对应的转向规则即可完成。Url 转向还可以实现临时重定向功能,即利用 http 协议的302 状态,将用户的访问地址临时定向到另外一个访问地址。此功能强悍到可将用户请求转向到任何第三方网站,直接从 ...

如何解决ajax跨域问题

您好,很高兴能帮助您, 历史后退状态问题我们可以使用一个数组来保存历史纪录,然后把这些数据村到历史对象中去,中的也可以解决,并且还有很多的开元框架给与支持,这样问题就不是很大。 跨域的问题就不是很好的解决,但是还是有办法的,一下给出一些基本的解决方案供大家选择: 1.使用代理,你可以使用web端的程序编写代理程序,把所有的ajax(动态网站静态化)请求的数据进行转发,web程序可以使php(做为现在的主流开发语言),jsp(SUN企业级应用的首选),asp等所有的编程语言。相信大家对这种方式一定很 ...

AJAX跨域访问解决方法

这个是IE的安全机制造成的,访问网页的客户端的IE设置需要修改一个地方:Internet选项-->安全-->自定义级别,把“通过域访问数据源”选为[启用]即可,在IE7下还要把访问域名或IP添加进可信任站点列表中。我开发的是B/S管理系统,可以在安装时自动修改客户端的IE设置,但如果是网站,就很难令浏览者去修改这个设置了。

Jquery ajax 怎么取 跨域 回调函数?

你把Url的aspx换成一般处理程序试试 function onclicks() { $.ajax( { type:"post",url:"Handler.ashx?cmd=sa",//用一般处理程序更好 success:function(msg) { $("#a").text(msg); }, error:function() { alert("程序出错"); } } ); } 下面是一般处理程序代码 using System; using System.Web; public class Ha ...

jq ajax 跨域问题怎么解决

js跨域解决方法: 1.使用jsonp方式跨域,支持GET,不支持POST 2.服务器端一个跨域头,使用CORS方式进行跨域 3.iframe通过参数或hash跨域 4.postMessage跨域 5.其他方式

如何解决ajax跨域问题

找到一种解决方式<br>现在也知道了怎样来解决跨域问题,余下的就是实现的细节了。实现的过程中错误还是避免不了的。由于不了解json和jsonp两种格式的区别,也犯了错误,google了好久才解决。<br>首先来看看在页面中如何使用jQuery的ajax解决跨域问题的简单版:<br><br>$(document).ready(function(){<br> var url='http://localhost:8080/WorkGroupManagment/open/getGroupById"<br> ...

如何解决ajax跨域问题

用CORS机制即可。A请求B,A头部带origin描述,然后B的响应头中会携带Access-Control-Allow-Origin头来描述是否允许该origin跨域访问。具体使用和代码,根据我上述的关键词你百度吧,我手机答的代码不好写。

ajax跨域问题是什么怎么解决

JS的跨域问题,我想很多程序员的脑海里面还认为JS是不能跨域的,其实这是一个错误的观点;有很多人在网上找其解决方法,教其用IFRAME去解决的文章很多,真有那么复杂吗?其实很简单的,如果你用JQUERY,一个GETJSON方法就搞定了

ajax是否能跨域请求,解决的办法

域A的页面JS需要访问域B下的链接获取数据,该方案在域A的服务器端建立一个Proxy程序(可能是ASP、servlet等任何服务端程序),域A的页面JS直接调用本域下的Proxy程序,proxy程序负责将请求发送给域B下的链接并获取到数据,最后再通过Proxy将数据返回给页面JS使用。<br>经过的访问流程就是: 域A下JS --> 域A 下Proxy -- > 域B下的链接<br>例子:<br>第一步:<br>域A: http://Jipiao.taobao.com/test.htm<br>页面 ...

MUI 的Ajax跨域问题怎么解决

由 于前少写前端代码(哈哈合格程序员啊)近项目用json作系统间交互手段自伴随着众ajax请求随要解决 ajax跨域问题本篇讲述白遇跨域知道跨域问题知道跨域问题知道何解决再解决跨域问题找两种解决ajax 跨域问题全程 知跨域问题 起 复用减少重复发单独发用户权限管理系统共其系统获取认证与授权信息暂且称A系统;调用A系统B例B系统 用ajax调用A系统系统接口(数据格式json)特别困惑A系统访问相应url返json数据B系统使用 ajax请求同url则点反应都没像都没发反反复复改改久都没能解决于求 ...