如何解决ajax跨域问题

1、 如何解决ajax跨域问题 由于此前很少写前端的代码（哈哈，不合格的程序员啊），最近项目中用到json作为系统间 交互的手段，自然就伴随着众多ajax请求，随之而来的就是要解决ajax的跨域问题。本 篇将讲述一个小白从遇到跨域不知道是跨域问题，到知道是跨域问题不知道如何解决，再 到解决跨域问题，最后找到两种方法解决ajax跨域问题的全过程。 不知是跨域问题 起因是这样的，为了复用，减少重复开发，单独开发了一个用户权限管理系统，共其他系 统获取认证与授权信息，暂且称之为A系统；调用A系统以B为例。在B系统中用ajax 调用A系统系统的接口（数据格式为json），当时特别困惑，在 A系统中访问相应

2、的url可 正常回返json数据，但是在B系统中使用ajax请求同样的url则一点儿反应都没有，好像 什么都没有发生一样。这样反反复复改来改去好久都没能解决，于是求救同事，提醒可能 是ajax跨域问 题，于是就将这个问题当做跨域问题来解决了。 知跨域而不知如何解决 知道问题的确切原因，剩下的就是找到解决问题的方法了。google 了好久，再次在同事的指 点下知道jQuery 的ajax有jsonp这样的属性可以用来解决跨域的问题。 找到一种解决方式 现在也知道了怎样来解决跨域问题，余下的就是实现的细节了。实现的过程中错误还是避免不 了的。由于不了解json和jsonp两种格式的区别，也犯了错误

3、, google 了好久才解决。 首先来看看在页面中如何使用jQuery 的ajax解决跨域问题的简单版: $(docume nt).ready(fu nctio n() var url= htt p:/localhost:8080/WorkGrou pMa nagme nt/open /getGrou pByld +?id=1 $.ajax( url:url, dataT ype:jsonp, processData:false , type:get, success:f un cti on( data) alert(data .n ame); , error:fu nction (XMLH

4、tt pRequest, textStatus, errorThrow n) alert(XMLHtt pRequest.status); alert(XMLHtt pRequest.readyState); alert(textStatus); ); ); 这样写是完全没有问题的，起先error的处理函数中仅仅是alert(“error ”，)为了进一步弄清 楚是什么原因造成了错误，故将处理函数变为上面的实现方式。最后一行alert使用为； parsererror。百思不得其解，继续google，最终还是在万能的stackoverflow 找至打答 案，链接在这里。原因是jsonp的格式与j

5、son格式有着细微的差别，所以在 server端的代码 上稍稍有所不同。 比较一下json与jsonp格式的区别: json 格式: message:获取成功, state : 1, result : name:工作组 1,id : 1, description :11 json P 格式: callback( message:获取成功, state : 1, result : name:工作组 1,id : 1, description :11 ) 看岀来区别了吧，在url中callback 传到后台的参数是神马callback 就是神马，jso np 比 json外面有多了一层，callb

6、ack。这样就知道怎么处理它了。于是修改后台代码。 后台java代码最终如下: RequestMapping(value = /getGroupByld) public String getGroupById(RequestParam( id ) Long id, Htt pServletRequest request, Http ServletRes ponse res pon se) throws IOExce pti on Stri ng callback = request.get Parameter( ReturnObject result =null ; callback); Gr

7、oup group = null ; try group = group Service.getGro up Byld(id); result = newReturnObject(group,获取成功, Con sta nts只ESULT_SUCCESS); catch (BusinessException e) e. prin tStackTrace(); result = newReturnObject(group,获取失败, Co nsta nts. RESULT_FAILED); String json = JsonConv erter.bea n2Js on( result); re

8、spon se.setC onten tT ype(text/html ); respon se.setCharacterE ncodi ng(utf-8); Prin tWriterout = res pon se.getWriter(); (+ json +); out .prin t(callback + return null ; 注意这里需要先将查询结果转换我 就变成了 jsonp。指定数据类型为 json格式，然后用参数 callback在json外面再套一层, jsonp 的ajax就可以做进一步处理了。 Parsererror的原因。原因在于盲目的把 json格 处理，造成了这

9、个错误，此时server端代码是这样 虽然这样解决了跨域问题，还是回顾下造成 式的数据当做jsonp格式的数据让ajax 的： RequestMapping(value = /getGroupByld) Res pon seBody public ReturnObject getGroupById(RequestParam( id ) Long id, Htt pServletRequest request, Http ServletRes ponse res pon se) String callback = request.getParameter(callback); ReturnObj

10、ect result =null ; Group group = null ; try group = group Service.getGro up ById(id); result = newReturnObject(group, 获取成功, Con sta nts只ESULT_SUCCESS); catch (BusinessException e) e. prin tStackTrace(); newReturnObject(group,获取失败, Co nsta nts. RESULT_FAILED); return result; 三3 result = 至此解决ajax跨域问题的第一种方式就告一段落。 追加一种解决方式 追求永无止境，在google的过程中，无意中发现了一个专门用来解决跨域问题的 件-jquery-js onp。 jQuery 插 有第一种方式的基础，使用jso np插件也就比较简单了，server端代码无需任何改动。 来看一下如何使用jquery-jso np插件解决跨域问题吧。 var url= htt p:/localhost:8080/WorkGrou pMan agme nt/open /getGrou pByld + ?id=1 $.jso np ( u