vue webpack重写cookie路径的方法


Posted in Javascript onJuly 10, 2019

Cookie详解

Cookie在远程浏览器端存储数据并以此跟踪和识别用户的机制。从实现上说,Cookie是存储在客户端上的一小段数据,浏览器(即客户端)通过HTTP协议和服务器端进行Cookie交互。

Cooke独立于语言存在,严格地说,Cookie并不是由PHP、Java等语言实现的,而是由这些语言对Cookie进行间接操作,即发送HTTP指令,浏览器收到指令便操作Cookie并返回给服务器。因此,Cookie是由浏览器实现和管理的。举例说,PHP并没有真正设置过Cookie,只是发出指令让浏览器来做这件事。PHP中可以使用setcookie() 或 setrawcookie() 函数设置Cookie。setcookie()最后一个参数HttpOnly设置了后,JavaScript就无法读取到这个Cookie。

设置Cookie时需注意:①函数有返回值,false失败,true成功,成功仅供参考,不代表客户端一定能接收到;②PHP设置的Cookie不能立即生效,要等下一个页面才能看到(Cookie从服务器传给浏览器,下个页面浏览器才能把设置的Cookie传回给服务器);如果是JavaScript设置的,是立即生效的;③Cookie没有显示的删除函数,可以设置expire过期时间,自动触发浏览器的删除机制。

Cookie是HTTP头的一部分,即现发送或请求Cookie,才是data域;setcookie()等函数必须在数据之前调用,这和header() 函数是相同的。不过也可以使用输出缓冲函数延迟脚本的输出,知道设置好所有Cookie和其他HTTP标头。

Cookie通常用来存储一些不是很敏感的信息,或者进行登录控制,也可用来记住用户名、记住免密码登录、防止刷票等。每个域名下允许的Cookie是有限制的,根据浏览器这个限制也不同。Cookie不是越多越好,它会增加宽带,增加流量消耗,所以不要滥用Cookie;不要把Cookie当作客户端的存储器来用。一个域名的每个Cookie限制以4千字节(KB)键值对的形式存储。

还有一种Cookie是Flash创建的,成为Flash Shard Object,又称Flash Cookie,即使清空浏览器所有隐私数据,这类顽固的Cookie还会存在硬盘上,因为它只受Flash管理,很多网站采用这种技术识别用户。

Cookie跨域,主要是为了统一应用平台,实现单点登录;需使用P3P协议(Platform for Privacy Preferences),通过P3P使用户自己可以指定浏览器的隐私策略,达到存储第三方Cookie的目的,只需要在响应用户请求时,在HTTP的头信息中增加关于P3P的配置信息就可以了。Cookie跨域涉及两个不同的应用,习惯上称为第一方和第三方。第三方通常是来自别人的广告、或Iframe别的网站的URL,这些第三方网站可能使用的Cookie。

好,重点给大家介绍vue webpack重写cookie路径的方法,具体内容如下所示:

webpack提供的反向代理服务器在开发阶段非常方便,几行简单的代码配置就可以使用反向代理功能,包括路径重写、cookie处理等。

项目开发阶段使用的API路径是 /admin ,部署到线上是 / ,所以在开发过程中需要在 proxyTable 进行反向代理配置,将路径重写掉,路径重写代码如下( config/index.js ):

proxyTable: {
  '/admin': {
  target: 'http://127.0.0.1:8080',
  changeOrigin: true,
  pathRewrite: {
   '^/admin': '/admin2'
  },
  }
}

启动项目之后进行登录,此时API请求成功,但是获取登录用户信息时发现cookie没有带过去。查看请求发现登录请求的 Set-Cookie 响应头中的 Path 是 /admin2 。但是咱们请求的路径是 /admin ,cookie当然不会生效。

查阅文档发现,proxyTable支持 onProxyRes 回调函数来自定义响应,流程是通过替换后端服务器设置的 cookie-path 来进行处理,代码如下:

proxyTable: {
  '/admin': {
  target: 'http://127.0.0.1:8080',
  changeOrigin: true,
  pathRewrite: {
   '^/admin': '/lesson/admin'
  },
  onProxyRes: function (proxyRes, req, res){
   const cookies = proxyRes.headers['set-cookie']
   if (cookies) {
   const newCookies = cookies.map(cookie=> {
    return cookie.replace(/Path=\/admin2/, 'Path=/')
   })
   delete proxyRes.headers['set-cookie']
   proxyRes.headers['set-cookie'] = newCookies
   }
 }
 },
},

重启webpack之后重新登录,发现cookie的路径已经被重写到 / 了。

总结

以上所述是小编给大家介绍的vue webpack重写cookie路径的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript事件委托技术实例分析
Feb 06 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
一些可能会用到的Node.js面试题
Jun 15 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
vue登录页面cookie的使用及页面跳转代码
Jul 10 #Javascript
Laravel admin实现消息提醒、播放音频功能
Jul 10 #Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 #Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 #jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 #jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 #jQuery
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 #Javascript
You might like
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
详解A标签中href=""的几种用法
2017/08/20 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
Python的高级Git库 Gittle
2014/09/22 Python
Python将xml和xsl转换为html的方法
2015/03/10 Python
Python聊天室程序(基础版)
2018/04/01 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
Python使用ffmpy将amr格式的音频转化为mp3格式的例子
2019/08/08 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
电子信息专业应届生自荐信
2014/06/04 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
就业意向书范本
2015/05/11 职场文书
环保建议书作文400字
2015/09/14 职场文书