成都创新互联网站制作重庆分公司

如何在vue中使用webpack重写cookie路径-创新互联

这篇文章给大家介绍如何在vue中使用webpack重写cookie路径,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

成都创新互联-专业网站定制、快速模板网站建设、高性价比嘉黎网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式嘉黎网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖嘉黎地区。费用合理售后完善,10多年实体公司更值得信赖。

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
   }
 }
 },
},

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

关于如何在vue中使用webpack重写cookie路径就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


本文标题:如何在vue中使用webpack重写cookie路径-创新互联
链接分享:http://cxhlcq.com/article/pcscj.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部