做Web开发必然会遇到的一个问题就是跨域,被浏览器的同源策略给拦截,请求根本发不出去。由于用的Spring版本时3.2.13,@CrossOrigin注解还不支持,而且在Response中加Access-Control-Allow-Origin之类Header的方式也不太有效,我就不说了,老夫这里只说的JSONP方式解决跨域问题。
假设用了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:"http://txtx44.natappfree.cc/AppInfoSystem/dev/dologin",//请求的url
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>
顺带卖个广告,我的视频号坚持发布网络科普、揭露各种骗局,关注我,一起来学习奇怪的知识吧!