AngularJS实现cookie跨域

页面导航:首页 > 网络编程 > JavaScript > AngularJS实现cookie跨域

AngularJS实现cookie跨域

来源: 作者: 时间:2016-02-02 09:58 【

前后端分离被越来越多的公司重视利用,然后带来的最棘手的问题就是,用户信息应如何保存。一、场景描述以Java为后台,AngluarJS做前端为例进行描述:当用户在界面登录时,需把用户
前后端分离被越来越多的公司重视利用,然后带来的最棘手的问题就是,用户信息应如何保存。

一、场景描述

以Java为后台,AngluarJS做前端为例进行描述:当用户在界面登录时,需把用户信息(如uid)存入后台JAVA系统中,用于前后端所处主域可能不同,所有采用常规的session进行保存已不能满足其业务场景。
解决方案:采用cookie进行存储,当cookie被禁止后采用本地存储localstorage。
采用cookie进行存储时,会出现跨域问题(即AngularJS访问JAVA端,需携带信息存入到JAVA服务端cookie中)。

二、AngularJS实例

AngularJS:

function getAdustryController($scope,$http){ $http.post('http://localhost/ajax/getAllIndustryCategoty.pt',{languageColumn:'name_eu'},{'withCredentials':true}).success(function(data){ $scope.industries = data; }); }

JAVA:
public String execute(){
	/* 要存入的cookie信息 */
	Cookie cookie = new Cookie(test_test,321);
	cookie.setMaxAge(3600);
	response.addCookie(cookie);
	
	/* This is a part of security, you cannot do that. If you want to allow credentials then your Access-Control-Allow-Origin must not use *. You will have to specify the exact domain. */
	response.setHeader(Access-Control-Allow-Origin, http://test.domain.cn); //请求源
	response.setHeader(Access-Control-Allow-Methods,POST); //请求方式POST, GET, OPTIONS
	response.setHeader(Access-Control-Max-Age, 3600); //有效期
	response.setHeader(Access-Control-Allow-Headers, Content-Type, *); //请求头类型
	response.setHeader(Access-Control-Allow-Credentials,true); //是否支持cookie跨域
	
	SiteHandlerAction SiteHandler = (SiteHandlerAction) BeansFactory.getBean(SiteHandlerAction.class);
	List list = SiteHandler.getAllIndustryCategory(); //所有的分类集合
	JSONArray jsonArray = JSONArray.fromObject(list); //将list转为json
	String json = jsonArray.toString(); //转为json字符串
	//将字符串写进输出流
	try {
		PrintWriter write = response.getWriter();
		write.print(json);
		write.close();
	} catch (IOException e) {
		e.printStackTrace();
	}
	return NONE;
}

三、Jquery实例:

$.ajax(http://localhost/ajax/getAllIndustryCategoty.pt,{
	type:POST,
	data:{languageColumn:'name_eu'},
	xhrFields:{withCredentials: true},
	crossDomain::true,
	success:function(data, status, xhr){}
});

四、常用浏览器查看所有cookie信息方式

Google浏览器查看本机所有cookie信息:依次点击设置--高级选项--内容设置--cookies--选择“显示cookies和其他网站数据”按钮就可以看到了
firefox浏览器查看本机所有cookie信息:依次点击设置--选项--隐私--移除单个Cookie

五、header信息:

Access-Control-Allow-Origin: | * 授权的源控制
Access-Control-Max-Age: 授权的时间
Access-Control-Allow-Credentials: true | false 控制是否开启与Ajax的Cookie提交方式
Access-Control-Allow-Methods: [, ]* 允许请求的HTTP Method
Access-Control-Allow-Headers: [, ]* 控制哪些header能发送真正的请求


 
Tags:

相关文章

    文章评论

    最 近 更 新
    热 点 排 行
    Js与CSS工具
    代码转换工具
    
    <