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

$(document).ready(function(){
var url='http://localhost:8080/WorkGroupManagment/open/getGroupById"
+""background-color: #ffff00">比较一下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/WorkGroupManagment/open/getGroupById"
+"";
$.jsonp({
"url": url,
"success": function(data) {
$("#current-group").text("当前工作组:"+data.result.name);
},
"error": function(d,msg) {
alert("Could not find user "+msg);
}
}); 


至此两种解决跨域问题的方式就全部介绍完毕。
补充：Ajax跨域问题有三种解决方案：
1.通过中间过渡层解决跨域问题


（1）通过Web代理服务器将不同域的应用统一通过代理服务器进行隔离，所有的应用都在一个域名下面了。（比如apache，nginx等）


（2）跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作。


2.通过<script>标签解决跨域问题
注意：凡是拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>


示例：
前台脚本：


<script type="text/javascript"> 
var flightHandler = function(data){ 
alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。'); 
}; 
var url = "http://abc.com:8080/AjaxCrossDomain/data/data.jsp"; 
var script = document.createElement('script'); 
script.setAttribute('src', url); 
document.getElementsByTagName('head')[0].appendChild(script); 
</script> 


后台data.jsp内容：




<%@ page language="java" pageEncoding="UTF-8"%> 
<% 
String callback = request.getParameter("callback"); 
StringBuilder builder = new StringBuilder(); 
builder.append(callback).append("({").append("\"code\": \"CA1998\",").append("\"price\": 1780,").append("\"tickets\": 5").append("});"); 
out.println(builder.toString()); 
%>


使用jquery的jsonp来实现跨域访问，例子如下：


<script type="text/javascript"> 
$(function(){ 
$.ajax({ 
type: "get", 
async: false, 
url: "http://abc.com:8080/AjaxCrossDomain/jsonp/data.jsp", 
dataType: "jsonp", 
jsonp: "callback", 
jsonpCallback:"flightHandler", 
success: function(json){ 
alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。'); 
}, 
error: function(){ 
alert('fail'); 
} 
}); 
}); 
</script>