JSONP方式解决跨域问题:
在做Web开发当中必然会遇到的一个问题就是跨域,被浏览器的同源策略给拦截,请求根本发不出去。由于用的Spring版本时3.2.13,@CrossOrigin注解还不支持,而且在Response中加Access-Control-Allow-Origin之类Header的方式也不太有效
假设用了fastjson库,那么Controller中作如下处理:
if(null != user){//登录成功
//放入session
session.setAttribute(Constants.DEV_USER_SESSION, user);
//页面跳转(main.jsp)
JSONPObject jsonpObject = new JSONPObject();
jsonpObject.setFunction(callback);//callback是控制器从请求中接收的参数
jsonpObject.addParameter(user);
return jsonpObject;
}
其实用jackson库也可以,巧的是也有一个同名的JSONPObject类,只是封装方式有点不同而已,都可以
另外就是客户端JS中需要一些修改,发起Ajax请求的代码为:
<script>
function login(){
//这里省略一些表单验证代码。。。
var userName = $("[name=devCode]").val();
var password = $("[name=devPassword]").val();
$.ajax({
type:"POST",//请求类型
//请求的url
url:"http://5bwtgd.natappfree.cc/AppInfoSystem/api/dologin",
data:{"devCode":userName,"devPassword":password},//请求参数
dataType:"jsonp",//jsonp是为了能跨域请求
jsonp: "callback", //参数名
jsonpCallback: "handleData", //参数值:回调函数名
error:function(res){
alert("请求失败!" + res.toString());
}
});
}
//独立的函数,处理返回的jsonp数据
function handleData(res){
if(res && res.devCode != ""){
alert("登录成功!");//这里省略跳到主页的代码
}else{
alert("登录失败!")
}
}
</script>