首页 > 其他分享 >AngularJS实现cookie跨域

AngularJS实现cookie跨域

时间:2023-03-13 11:31:33浏览次数:48  
标签:Control 跨域 Allow Access -- cookie AngularJS response


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

一、场景描述


以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能发送真正的请求    





标签:Control,跨域,Allow,Access,--,cookie,AngularJS,response
From: https://blog.51cto.com/u_15998238/6117408

相关文章

  • vue开发本地跨域配置(代理proxy)
    问题我们本地调试一般都是npmrunserve,然后打开本机ip:8080(localhost:8080)对吧,这时候我们要调接口调试,后端的接口的地址可能在测试环境,也可能是自己电脑的ip,总之不是你......
  • 第128篇:浏览器存储(cookie、webStorage、 IndexedDB)
    好家伙,本篇为《JS高级程序设计》第二五章“浏览器存储”学习笔记 我们先来讲个故事一个“薅羊毛”的故事(qq.com)概括一下,就是有个人通过网络平台非法购买了大量“c......
  • WebApi问题与跨域和返回json
    1、编写接口时,发现访问不到指定接口注释掉[Authorize]特性给方法设置访问方式,已经指定路由方法如下2、出现一下跨域问题在web.config里面配置2、返回类型指定接口......
  • token解决cookie的弊端
    token解决cookie的弊端目录token解决cookie的弊端cookie的弊端token解决弊端一什么是token和JWTJWT的构成token工作流程token解决弊端二CSRF攻击token防止CSRFcookie的弊......
  • 初始Cookie、Cookie的基本用法
    初始CookieCookie是什么?Cookie全程HTTPCookie,简称Cookie是浏览器存储数据的一种方式因为存储在用户本地,而不是存储在服务器上,是本地存储......
  • 跨域的 MPLS VPN 解决方案
    随着MPLSVPN的技术不断成熟,应用场景也逐渐扩大,使得应用所涉及的网络架构越来越大,越来越多的企业选择使用MPLSVPN。之前所描述的都是在同一个自治区域内传递的MPLSVP......
  • Cookie
    会话:用户打开一个浏览器,点击很多超链接,访问多个web资源,关闭浏览器,这个过程称为会话。一个网站,怎么证明你来过?客户端和服务端1.服务端给客户端-一个信件,客户端下次访问......
  • 跨域名问题
    【学习什么是一级域名和二级域名?】【什么是跨域问题?以及其解决方案】......
  • C# ASP.NET MVC 配置允许跨域访问
    在web.config文件中的system.webServer节点下增加如下配置<httpProtocol><customHeaders><addname="Access-Control-Allow-Origin"value="*"/>......
  • Cookie前端优化
    cookie由于http请求每次都是独立的,它的执行情况和结果与前面的请求、之后的请求没有直接关系,没有办法区分当前客户,所以产生了cookie。使特定客户端与服务器产生联系cooki......