AngularJS实现cookie跨域
前后端分离被越来越多的公司重视利用，然后带来的最棘手的问题就是，用户信息应如何保存。
一、场景描述
以为后台，AngluarJS做前端为例进行描述：当用户在界面登录时，需把用户信息（如uid）存入后台JAVA中，用于前后端所处主域可能不同，所有采用常规的session进行保存已不能满足其业务场景。
解决方案：采用cookie进行存储，当cookie被禁止后采用本地存储localstorage。
采用cookie进行存储时，会出现跨域问题（即AngularJS访问JAVA端，需携带信息存入到JAVA服务端cookie中）。
二、AngularJS实例
AngularJS：
function getAdustryController($scope,$http){ $http.post('https://localhost/ajax/getAllIndustryCategoty.pt',{languageColumn:'name_eu'},{'withCredentials':true}).success(function(data){ $scope.industries = }); }
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, ); //请求源
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字符串
//将字符串写进输出流
PrintWriter write = response.getWriter();
write.print(json);
write.close();
} catch (IOException e) {
e.printStackTrace();
return NONE;
三、Jquery实例：
$.ajax(https://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能发送真正的请求跨域问题的总结
时间： 01:19:08
&&&& 阅读：62
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&跨域方案问题：跨域问题的本质是浏览器的同源策略，又称同源政策；什么是同源策略？同源是三个相同：“ 域名相同 ” ， “ 端口相同 “ ， "协议相同"。比如说链接& 上的网页：http:///dir2/other.html：同源http:///dir/other.html：不同源（域名不同）http://v2./dir/other.html：不同源（域名不同）http://:81/dir/other.html：不同源（端口不同）不同源的页面，A 网站的一个页面setcookie，其他网站（不同源）是拿不到的；为什么有同源策略？为了安全，如果Ａ网站一个页面的setCookie，被其他网站拿到了，就可以做坏事了；同源策略很严格，下面的事情被限制：（1） Cookie、LocalStorage 和 IndexDB 无法读取。（2） DOM 无法获得。（3） AJAX 请求不能发送。cookie，dom , ajax 不能跨域的解决方案：Cookie 的跨域只有同源的网页才能共享cookie但是，两个网页一级域名相同，只是二级域名不同，那么有两种解决方法：1. &两个页面都设置相同的&document.domain, cookie 可以共享&举例来说，A网页是‘’document.domain = ‘‘;如果Ａ，Ｂ两个页面都设置了document.domain = ‘
‘, 那么A B两个页面可以访问到对方的cookies:在A页面设置了：document.cookie = ‘name=dudu‘;在B页面就可以获取到了：var cookieA = document.cookie2. 不用在两个页面上设置，服务端设置固定的一级域名；const express = require(‘express‘);var serve = express();serve.use(‘/aaa‘,function(req,res){
res.cookie(‘user‘,‘name‘,{ path:‘/‘, maxAge:24*3600*1000 , domain:.example.com});
res.send(‘ok‘);})serve.listen(8888);iframe跨域通过iframe 和 window . open ( ), 父窗口获取不到子窗口的dom，子窗口获取不到父窗口的如果&一级域名相同，二级域名不同，那么和cookie 一样设置相同的 document.domain，就可以了；如果完全的不相同，有三种方法解决跨域窗口的通信问题：url #hash跨文档通信API（Cross-document messaging）１.　url # 后面改变了， 页面不会刷新，父窗口指定 子窗口的src #hashvar src = originURL + ‘#‘ + data;document.getElementById(‘myIFrame‘).src = src;子窗口通过 onhashchange 来接收通知；window.onhashchange = checkMessage;function checkMessage() {
var message = window.location.hash;
// ...}2. &跨文档通信API 。window对象新增了一个window.postMessage方法，哪怕不同源，也可以允许跨窗口通信。父窗口var popup = window.open(‘‘, ‘title‘);popup.postMessage(‘Hello World!‘, ‘‘);postMessage方法的第一个参数是数据，第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。ajax 跨域1. nginx 反向代理，设置一个代理服务器， nginx conf.文件里面，设置 proxy 来将请求代理到其他服务器上面2. jsonp3. cors4. websocketjsonp图像ping一个网页可以从任何网页中加载图片，不用担心跨域问题，这也是广告跟踪浏览量的主要方式；请求的数据是查询字符串带过去的，返回来什么不重要，反正浏览器收不到，浏览器只能知道响应来了没有；
var img = new Image();
img.onload = img.onerror = function () {
alert(‘done!‘);
img.src = ‘1.z0./cors_CFE74C5D-058B-468C-9D0A-8AD.png?name=dudu‘缺点：只能是 收不到具体返回来是什么；JSONP&jsonp 就是在函数中调用json , jsonp 分为两部分：回调函数&和&回调函数的参数（数据）；回调函数的名字写在查询字符串里面，等请求到浏览器，回调函数会执行，里面的参数就是数据；原来是&script& 和＜img＞一样，可以从其他域加载资源，比如从一个国外的网站上获取地址；function handleResponse (res) {
console.log(res)}var script = document.createElement(‘script‘);script.src = ‘http://freegeoip.net/json/?callback=handleResponse‘;document.body.insertBefore(script,document.body.firstChild);后台做了一定的配置，返回字符串 ‘ handleResponse ([ { "name" : "dudu" } ]) ’, 这样我们浏览器的回调函数就会执行；&jsonp 缺点：1. 它只支持GET请求而不支持POST等其它类型的HTTP请求2. 它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。3. &jsonp在调用失败的时候不会返回各种HTTP状态码。4. 缺点是安全性。万一假如提供jsonp的服务存在页面注入漏洞，即它返回的javascript的内容被人控制的。那么结果是什么？所有调用这个 jsonp的网站都会存在漏洞。于是无法把危险控制在一个域名下…所以在使用jsonp的时候必须要保证使用的jsonp服务必须是安全可信的。cors简单原理：发送一个普通的 get 或者是 post , 没有origin字段，主体内容就是text/plain；&我们新加一个自定义头部，Origin : http:& (请求页面的原信息，协议，域名和端口)如果服务器允许，返回 Access-Control-Allow-Origin :&&http:&( 和请求相同的&)说明服务器允许，再以实际的 HTTP 请求方法发送那个真正的请求。&CORS需要浏览器和服务器同时支持。实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。具体实现：浏览器将CORS请求分成两类：简单请求和非简单请求。区分条件是满足下面两个条件的是简单请求：1) 请求方法是以下三种方法之一：HEADGETPOST（2）HTTP的头信息不超出以下几种字段：AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain不满足这两个条件的，就是非简单请求；浏览器对于简单请求，直接发送请求，自动加上origin 字段，服务器如果不同意，就返回一个正常的http, xhr.onerror 就知道报错了； 如果同意，会多出来三个字段：Access-Control-Allow-Origin: http://
// 请求的origin ，*Access-Control-Allow-Credentials: true
// 不要发送cookie, 没有该字段，发送cookie 设为trueAccess-Control-Expose-Headers: FooBar
//getResponseHeader() 只能拿到6个基本字段，多的在这里设置；6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、PragmaCORS请求默认不发送Cookie。如果要发送，一方面要服务器同意，指定Access-Control-Allow-Credentials字段，另一方面在请求要：var xhr = new XMLHttpRequest();xhr.withCredentials = true;如果不想让cookie &发送，要显示的将xhr.withCredentials 改成对于非简单请求，会在正式通信之前，增加一次"预检"请求；websocketwebsocket 本身就没有同源策略，只要服务器支持，就可以通过它进行跨源通信；使用ws://（非加密）和wss://（加密）作为协议前缀。GET /chat HTTP/1.1Host: server.example.comUpgrade: websocket
// 这两行切换成websocket 通信Connection: UpgradeSec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==Sec-WebSocket-Protocol: chat, superchatSec-WebSocket-Version: 13Origin: http://
//表示该请求的请求源（origin），即发自哪个域名。因为服务器可以根据origin字段，判断是否许可本次通信。如果该域名在白名单内，服务器就会做出如下回应:HTTP/1.1 101 Switching ProtocolsUpgrade: websocketConnection: UpgradeSec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=Sec-WebSocket-Protocol: chat扯 websocket 协议……一致性验证。比如我们从网上下载了某个文件，网站上一般会给出该文件的MD5值，我们下载下来后，可以利用工具计算出新的MD5值，与正确的MD5值进行对照，如果不一样，则可以断定该文件下载出错或被篡改了。数字签名。可以用MD5算法对发布的程序或发布的消息生成MD5值作为签名等。密码存储。在传输过程中或存储过程中，直接用明文的密码都是很危险的。可以在传输之前先用MD5加密，存储也不用存储明文，可以直接存储MD5值。在验证时，先把输入的密码转换成MD5值再与存储值进行对比。MD5的一个实现版本：标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！21:22 提问
ajax请求如何携带cookie
想通过ajax请求访问某网站，需要携带上指定cookie，
网上百度一下，知道不能直接设置cookie，但是说可以在ajax请求之前设置写cookie来实现
这样发送的报文头中就会包含cookie
document.cookie=
var xhr=new XMLHttpRequest();
xhr.onreadystateChange=parseC
xhr.open("GET",");
xhr.send(null);
为啥我这样还是错了呢，请各位多多指教！
按赞数排序
看下是否跨域了，跨域不能的，需要用activex
----------------------同志你好，我是CSDN问答机器人小N，奉组织之命为你提供参考答案，编程尚未成功，同志仍需努力！
其他相关推荐　　最近的项目中涉及到了应用ajax请求后台系统登录，身份认证失败，经过不断的调试终于找到解决方案。
应用场景：
　　项目测试环境：前端应用HTML，js，jQuery ajax请求，部署在Apache服务器；后端业务系统应用spring mvc，mybatis，部署在tomcat服务器。当在一个系统需要调用另一个系统的时候，就会出现跨域的问题，即本次我们遇到了ajax请求的跨域问题。
　　系统权限安全框架使用shiro，系统登录时发送ajax请求调用springmvc action方法进行系统登录及身份认证，角色权限授权等。由于ajax请求时，浏览器会认为携带Cookie是不安全请求，将限制其携带Cookie信息，导致登录action方法无法获取并响应相应的Cookie（JSESSIONID），身份认证及角色权限授权、退出等都操作都无法正常使用。
解决方案：
　　1、当发送ajax请求时，查看浏览器调试信息中Headers和Cookies，发现发送到后端的跨域请求并没有携带 cookie 信息，可见Request Headers不包含Cookie属性，Response Headers中也不包含Set-Cookie属性，导致无法得到后台业务系统的认证。
　　解决：在ajax里添加withCredentials的配置，允许其请求携带cookie信息。通过设置withCredentials=true，发送Ajax时，Request header中便会带上 Cookie 信息。
type: "post",
async:false,
data:datatosend,
dataType:"json",
beforeSend: function(xhr) {
xhr.withCredentials = true;
crossDomain:true,
success: function (data) {
var a=JSON.stringify(data);
if(data.result==true){
　　...........
　　 }else{
　　　　 　　...........
　　　　 }
error:function (data) {
var a=JSON.stringify(data);
　　注意：&踩过的坑&我们在beforeSend方法里设置withCredentials=true；在上述代码情境下，如果使用xhrFields:{&withCredentials:true&}方法，则允许携带cookie信息的配置并不生效。（原因：ajax中添加了async:false，即修改为同步了，在窗口上下文的同步模式中，已不再支持使用XMLHttpRequest的withCredentials属性）。当保持异步模式时，我们可以更换对应的方法。注意2种方法的区分。
&　　2、服务器server端要配置Access-Control-Allow-Credentials
　　我们在客户端设置了withCredentials=true&参数，对应着，服务器端要通过在响应 header 中设置Access-Control-Allow-Credentials = true来运行客户端携带证书式的访问。通过对Credentials参数的设置，就可以保持跨域Ajax时传递的Cookie。
response.setHeader("Access-Control-Allow-Credentials", "true");
　　3、服务器server端要配置Access-Control-Allow-Origin
　　到以上配置为止，发送ajax请求，我们发现还会出现一个错误，提示我们&Access-Control-Allow-Origin&不能用&*&通配符。原因是：当服务器端&Access-Control-Allow-Credentials = true时，参数Access-Control-Allow-Origin&的值不能为&'*'&。
　　我们重新设置Access-Control-Allow-Origin的值，当服务器端接收到请求后，在返回响应时，把请求的域Origin填写到响应的Header信息里（即谁访问我，我允许谁），代码如下：
response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
　　ok，到目前问题搞定了，经过测试，可成功传递及响应cookie信息，浏览器调试信息如下图所示：
阅读(...) 评论()Seems that something similar already has been discussed on stackoverflow, but i could not find exactly the same.
I am trying to send Cookie with CORS(Cross-origin resource sharing), but it is not working.
This is my code.
type: "POST",
url: "/api/getlist.json",
dataType: 'json',
xhrFields: {
withCredentials: true
crossDomain: true,
beforeSend: function(xhr) {
xhr.setRequestHeader("Cookie", "session=xxxyyyzzz");
success: function(){
alert('success');
error: function (xhr) {
alert(xhr.responseText);
I dont see this cookie in request HEADER.
解决方案 You cannot set or read cookies on CORS requests through JavaScript. Although CORS allows cross-origin requests, the cookies are still subject to the browser's same-origin policy, which means only pages from the same origin can read/write the cookie. withCredentials only means that any cookies set by the remote host are sent to that remote host. You will have to set the cookie from the remote server by using the Set-Cookie header.
本文地址： &
看来，类似的事情已经已经在计算器讨论，但我无法找到完全一样的。
我想送饼干与CORS（跨域资源共享），但它不工作。
这是我的code。
$。阿贾克斯（
键入：“POST”，
网址：“/api/getlist.json”
数据类型：“JSON”，
xhrFields：{
withCredentials：真
跨域：真正的，
beforeSend：功能（XHR）{
xhr.setRequestHeader（“曲奇”，“会话= xxxyyyzzz”）;
成功：函数（）{
警报（“成功”）;
错误：函数（XHR）{
警报（xhr.responseText）;
我没有看到这个cookie的请求头。
解决方案 您不能设置或读取的Cookie在CORS通过JavaScript请求。虽然CORS允许跨域请求，饼干仍受到浏览器的同源策略，这意味着来自同一产地唯一的页面可以读/写的cookie。
withCredentials 只意味着远程主机设置任何cookie被发送到远程主机。您必须使用设置Cookie 头设置从远程服务器中的cookie。
本文地址： &
扫一扫关注官方微信}