项目剩余部分出现的问题及解决方式(创新实训日志九)

一、跨域Ajax请求携带cookies

由于项目采用了前后端分离的方式，静态资源放置在了8081端口，而数据请求则开放在8082端口。

获取数据时的跨域问题已经解决了，然而在利用cookie获取已登录用户的个人信息时出现了问题，因为登录时得到的JSESSIONID和发送post请求时的JSESSIONID不一致，这里猜测是出现了跨域问题导致cookies无法正确的提交给后台。

查阅了大量的资料配合试验之后，最终得到了一个实用的解决方案：

1.后端配置

这段代码写在了检查登录的过滤器里面

response.setHeader("Access-Control-Allow-Origin", "http://localhost:8081");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
// 允许跨域请求中携带cookie
response.setHeader("Access-Control-Allow-Credentials", "true");

此外登录成功的时候，将sessionId返回给前台，因为前台获取这个sessionId实在是太困难了。。。

if(envelope.getCode() == 0){    //如果验证成功
	session.setAttribute("user",envelope.getObj()); //设置session
	envelope.setObj(session.getId());   //返回sessionid
}

2.登录时利用cookies存储sessionId

$.post('http://localhost:8082/user/login',data,function(str,status,xhr){
	//alert(str)
	res = eval('('+str+')');
	if(res.code != 0){
		alert(res.message);
    }else{
        // 设置一个键为loginCoo的cookies，保存jsession的值
		setCookie('loginCoo',res.object);
        window.location.href = 'http://localhost:8081/blog.html';
	}
});

3.提交时构建一个允许cookies的请求

首先手动设置jsessionid然后利用这个jsessionid来提交数据。

document.cookie = 'jsessionid='+getCookie('loginCoo');
$.ajax({
	url : 'http://localhost:8082/comment/comArt',
	data : data,
    dataType: 'json',
	type : 'POST',
    xhrFields: {
		withCredentials: true
	},
	crossDomain: true,
	success: function(res) {
  		// 如果提交成功
		if(res.code == 0){
        	;
        }else{
			alert(res.message);
		}
	}
})；

这样就实现了提交数据时携带cookies。