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 相关文章推荐
js 判断 enter 事件
Feb 12 Javascript
jquery随意添加移除html的实现代码
Jun 21 Javascript
js style动态设置table高度
Oct 21 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
js实现鼠标拖拽div左右滑动
Jan 15 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 Javascript
原生JS实现弹幕效果的简单操作指南
Nov 10 Javascript
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
php生成静态文件的多种方法分享
2012/07/17 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
几个javascript操作word的参考代码
2009/10/26 Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
json原理分析及实例介绍
2012/11/29 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
详解jQuery事件
2017/01/13 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
微信小程序抽奖组件的使用步骤
2021/01/11 Javascript
浅谈Python中copy()方法的使用
2015/05/21 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
详解Python字符串切片
2019/05/20 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
python基于openpyxl生成excel文件
2020/12/23 Python
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
消防应急演练方案
2014/02/12 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python