1.通过nginx配置实现跨域:通过Nginx反向代理机制解决跨域问题局限性很大,要求跨域间的服务器在同一组nginx的管理下才行,不灵活,不做讲解,感兴趣可参考:;
2.修改浏览器配置实现跨域:适用场景极少,eg:自己的后台维护(自己人使用,非面向用户)请求其他域下的接口数据,ajax跨别人的域 需设置修改浏览器属性,允许浏览器跨域操作(为了安全浏览器默认是禁止跨域操作的)
3.利用CORS规范实现跨域:除了一少部分低版本浏览器不支持,目前主流浏览器都以支持此规范了,只要服务器的响应消息符合规范即可实现跨域(支持任何请求方式,而jsonp仅支持get请求)
CORS跨来源资源共享 原理:首先要知道的一个知识点--http在进行跨域请求时,请求头中必然会携带字段origin字段来记录访问来源. 在服务器端声明哪些资源是可以被其他哪些域名访问的可以通过注解和配置搞定,当这些资源被访问时候(复杂访问可能会有预检测访问权限,通过才能进行真的访问),这些资源的返回结果的响应首部会有个Access-Control-Allow-Origin字段用来告诉浏览器哪些源能访问这些资源,如果之前请求头中的origin字段包含在内,则此次跨域请求成功
springMVC4.2实现跨域的具体操作参照:
如果不适用使用springMVC4.2或版本不够可通过其他方式实现:过滤器设置响应头,是其包含符合CORS规范的响应头(简单说就是设置一些相应字段让浏览器根据CORS规范识别是否允许此次跨域)参照:
4.jsonp协议实现ajax跨域(仅支持get请求)
//A域请求B域数据
//A站js代码:
function defaultFunction(jsonret){
alert("Result22:"+jsonret.a);
}
window.οnlοad=function(){
$.ajax({
type : "get",
async:false,
url : "http://localhost:8080/base/json.do", //去一个非本域的url请求数据
dataType : "jsonp",//数据类型为jsonp则抓到的数据并不是 JSON,而是任意的JavaScript,此时会用 JavaScript 直译器执行而不是用 JSON 解析器解析
jsonp: "callback",//服务端用于接收callback调用的function名的参数Key(不写,默认值为callback)
jsonpCallback:"defaultFunction",//手动指定的回调函数名(因为success方法是成功后必回调的所以可以不传此值)
<!--以上就相当于引入了一个script元素<script src="http://localhost:8080/base/json.do?callback=defaultFunction"></script>-->
<!--加载元素后执行回调函数之后再删除掉此元素-->
success : function(data){//无论是否指定了回调函数都会执行的函数
alert("Result:"+data.a) ;
},
error:function(data){
alert("error")
alert(JSON.stringify(data));
}
});
// Jquery简单实现
// $.getJSON("http://localhost:8080/base/json.do?callback=?",
// function(data){
// alert("Result:"+data.a)
// });
}
//B站java代码:
@RequestMapping("/base/json.do")
public void exchangeJson(HttpServletRequest request,HttpServletResponse response) {
try {
// response.setContentType("text/html");
// response.setContentType("text/plain");
// response.setHeader("Pragma", "No-cache");
// response.setHeader("Cache-Control", "no-cache");
// response.setDateHeader("Expires", 0);
Map<String,String> map = new HashMap<String,String>();
map.put("result", "content");
PrintWriter out = response.getWriter();
String jsonpCallback = request.getParameter("callback");//客户端请求参数
if(jsonpCallback==null){
jsonpCallback= "defaultFunction";
}
out.println(jsonpCallback+"({a:666,b:777})");//返回jsonp格式数据
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
}
},