AngularJS实现cookie跨域

前后端分离被越来越多的公司重视利用,然后带来的最棘手的问题就是,用户信息应如何保存。

一、场景描述

以Java为后台,AngluarJS做前端为例进行描述:当用户在界面登录时,需把用户信息(如uid)存入后台JAVA系统中,用于前后端所处主域可能不同,所有采用常规的session进行保存已不能满足其业务场景。

解决方案:采用cookie进行存储,当cookie被禁止后采用浏览器本地存储localstorage。

采用cookie进行存储时,会出现跨域问题(即AngularJS访问JAVA端,需携带信息存入到JAVA服务端cookie中)。

二、AngularJS实例

AngularJS:

<pre name="code" class="javascript">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<IndustryCategory> 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: <origin> | *  授权的源控制
Access-Control-Max-Age: <delta-seconds> 授权的时间
Access-Control-Allow-Credentials: true | false 控制是否开启与Ajax的Cookie提交方式
Access-Control-Allow-Methods: <method>[, <method>]* 允许请求的HTTP Method
Access-Control-Allow-Headers: <field-name>[, <field-name>]* 控制哪些header能发送真正的请求    

参考文章:http://my.oschina.net/blogshi/blog/303758

时间: 2024-10-15 04:38:52

AngularJS实现cookie跨域的相关文章

ASP.NET中Cookie跨域的问题及解决代码

ASP.NET中Cookie跨域的问题及解决代码 http://www.liyumei.net.cn/post/share18.html Cookies揭秘  http://www.cnblogs.com/zhangziqiu/archive/2009/08/06/cookies-javascript-aspnet.html 最近在项目开发中遇到一个很棘手的问题,一个用户在顶级域名登录后,跳转到自己所拥有的二级域名下管理二级网站时,cookie丢失了,一直找解决办法找了整整两天,百度谷歌一大堆,

Iframe和Frame中实现cookie跨域的方法(转载)

在Iframe和Frame中默认是不支持Cookie跨域的,但通过设置P3P协议相关的响应头可以解决这一问题.关于p3p协议: P3P: Platform for Privacy Preferences(隐私偏好平台).隐私偏好平台(P3P)是允许网络站点来宣告它们收集的关于浏览用户他们的意向使用的信息的一个协议.原意是当用户浏览时,授予用户他们个人信息的更多控制. P3P是万维网联盟(W3C)公布的一项隐私保护推荐标准,旨在为网上冲浪的 Internet用户提供隐私保护.现在有越来越多的网站在

cookie 跨域访问的解决方案

Cookie 同域单点登录  最近在做一个单点登录的系统整合项目,之前我们使用控件实现单点登录(以后可以介绍一下).但现在为了满足客户需求,在不使用控件情况下实现单点登录,先来介绍一下单点登录. 单点登录:多个不同系统整合到统一加载个平台,用户在任何一个系统登录后,可以访问这个统一加载上的所有系统.登录之后,用户的权限和信息不再受某个系统的限制,即使某个系统出现故障(包括统一加载平台),其他系统还是能正常使用的.这就需要用户权限等信息保存到客户端,不受服务器的限制. 在cookie相关文档信息中

解决cookie跨域访问

一.前言 随着项目模块越来越多,很多模块现在都是独立部署.模块之间的交流有时可能会通过cookie来完成.比如说门户和应用,分别部署在不同的机器或者web容器中,假如用户登陆之后会在浏览器客户端写入cookie(记录着用户上下文信息),应用想要获取门户下的cookie,这就产生了cookie跨域的问题. 二.介绍一下cookie cookie 路径: cookie 一般都是由于用户访问页面而被创建的,可是并不是只有在创建 cookie 的页面才可以访问这个cookie.在默认情况下,出于安全方面

基于Cookie跨域的单点登录问题

由于项目中,需要用的单点登录,主要的思路是:系统1:用户名密码-->写入Cookie-->其他系统读取Cookie. 1.在同一个服务器下的Cookie共享 @Component("userLoginAction") @Namespace("/userLogin") @ParentPackage("json-default") public class UserLoginAction extends ActionSupport{ @A

vue resource 携带cookie请求 vue cookie 跨域

vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm install vue-resource --save 在主方法添加 过滤 Vue.http.interceptors.push(function(request, next) {//拦截器 // 跨域携带cookie request.credentials = true; next() }) 以下是针对每个请

关于cookie跨域问题

java 后台: Cookie cookie = new Cookie("userName","lisi");//String string = "168.0.107";//cookie.setDomain(string);cookie.setDomain("localhost");cookie.setPath("/");cookie.setMaxAge(3600);response.addCookie(c

Spring Boot+AngularJS中因为跨域导致Session丢失

http://blog.csdn.net/dalangzhonghangxing/article/details/52446821 如果还在为跨域问题烦恼,请查看博主的 解决angular+spring boot的跨域问题 那篇文章. 博主在项目开发过程中,遇到了由于跨域而导致的Session丢失问题,非常的恶心,但是经过在网上查阅各种资料,发现解决方法十分简单. 在我们每一次的数据请求中,浏览器都会向后台发送一个JSession,后台会根据这个值自动查找Id为JSession的那个sessio

关于AngularJS中$http跨域 与 nodejs接收跨域请求(使用express-session,body-parser)的设置

1.跨域的服务端设置: 使用express挂载跨域响应中间件 app.all("*", function (req,res,next) { res.header('Access-Control-Allow-Credentials', true);// 接受携带Cookie的请求 res.header("Access-Control-Allow-Origin", "http://localhost:3000,http://192.168.1.100:3000