本地开发环境cookie丢失?

thekingisalwaysluc 发布于2019-08-22 15:25 / 3104人阅读

摘要：代理响应事件，可以在这里修改响应。再贴一遍代码修改修改此处使用了对象进行操作，遍历，替换相应的值，删除原来的再重新设置一遍即可。至此，我们可以在的中来进行配置，解决开发环境下丢失的问题。

问题

最近项目对接口进行安全改造,需要用到一个Path=/XXX/的cookie值,但是本地开发环境会出现cookie丢失的问题,因为本地开发环境目录都是http://localhost:8000/home,不会包含XXX路径,这样请求就会丢失用于安全的cookie.

解决方案 最简单粗暴的解决方案

修改项目目录,添加一个XXX的文件夹，把开发环境的需要的静态资源和页面文件放到XXX文件夹下，开发环境下访问项目地址改成http://localhost:8485/XXX。显然这个方案有缺陷，如果cookie path 改变，我们又需要再次改变项目目录结构，可能还需要修改webpack配置（或者其他打包配置）

nginx 代理的方式

如果项目本地开发环境使用了nginx代理，那么只需要一行配置就可以轻松搞定，直接上代码

location /{
    ...
    proxy_pass http://localhost:8000;
    proxy_cookie_path /XXX/ /;
    ...
}
 
#原理是代理转换了cookie的path，从/XXX/，转换成/。这样项目就不用做任何修改了。

webpack-dev-server 解决方案

了解前面两个方案之后，我们来看看重头戏，项目没有使用nginx作为代理，而是使用webpack-dev-server提供的代理功能，我们改怎么来配置呢？相信比较熟悉webpack-dev-server的同学都知道webpack-dev-server可以配置proxy，其实就是个代理的配置。先看一下最终的解决方案，在webpack.config.js中配置，如下

devServer:{
    proxy: {
      "/api": {
        target: "http://localhost:8000",
        pathRewrite: {"^/api" : ""}
      }，
      onProxyRes: function(proxyRes, req, res) {
          var cookies = proxyRes.headers["set-cookie"];
          var cookieRegex = /Path=/XXX//i;
          //修改cookie Path
          if (cookies) {
            var newCookie = cookies.map(function(cookie) {
              if (cookieRegex.test(cookie)) {
                return cookie.replace(cookieRegex, "Path=/");
              }
              return cookie;
            });
            //修改cookie path
            delete proxyRes.headers["set-cookie"];
            proxyRes.headers["set-cookie"] = newCookie;
          }
        }
    }
}

由于查找了很多资料也没有查到简单的配置方式，我使用了onProxyRes的配置进行手动修改cookie。如果其他同学有其他简单一些的方式，还望不吝赐教！

首先，同样是作为代理，我的思路就是参照nignx的思路一样，对cookie 的path进行一个转化，这样思路就明确了，查找配置，转换cookie，我感觉已经离胜利很近啦。

果然我还是太年轻啊，以为剩下的事情肯定so easy了，结果我看了好几遍官网文档中proxy配置项，一个一个地查看，压根找不到那一项配置可以修改cookie 的path；然后我开始寻求百度，google的帮助，就这样查了半天，密密麻麻的浏览器标签，泪崩，难道真没办法了？还是大神们从来不这么玩啊。。。

之后看到官网有一句话“The dev-server makes use of the powerful http-proxy-middleware package. Checkout its documentation for more advanced usages.”，茅塞顿开啊，原来更高级的使用方式可以去查看http-proxy-middleware，完整的配置大家可以自行查看和学习

此处仅仅介绍几个配置

cookieDomainRewrite

这个配置可以重写cookie 的domain,当看到这个配置时，眼睛都亮了，按理说也该有个cookiePathRewrite，我确认了好几遍，确实没有。

onProxyReq
代理请求事件，可以在这里对请求修改。

onProxyRes

代理响应事件，可以在这里修改响应。

function onProxyRes(proxyRes, req, res) {
    proxyRes.headers["x-added"] = "foobar";     // add new header to response
    delete proxyRes.headers["x-removed"];       // remove header from response
}

重点来了，看到github上的这段demo，思路就有了，利用这个事件回调我们可以对set-cookie响应头进行重写，替换Path值。再贴一遍代码：

onProxyRes: function(proxyRes, req, res) {
          var cookies = proxyRes.headers["set-cookie"];
          var cookieRegex = /Path=/XXX//i;
          //修改cookie Path
          if (cookies) {
            var newCookie = cookies.map(function(cookie) {
              if (cookieRegex.test(cookie)) {
                return cookie.replace(cookieRegex, "Path=/");
              }
              return cookie;
            });
            //修改cookie path
            delete proxyRes.headers["set-cookie"];
            proxyRes.headers["set-cookie"] = newCookie;
          }
        }

此处使用了proxyRes对象进行操作，遍历proxyRes.headers["set-cookie"]，替换相应的Path值，删除原来的set-cookie,再重新设置一遍即可。

至此，我们可以在webpack-dev-server的proxy中来进行配置，解决开发环境下cookie丢失的问题。

参考：

https://github.com/nodejitsu/...

https://github.com/chimurai/h...

云服务器服务器托管本地cookies js本地cookie保存数据本地环境本地环境搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93451.html

小程序填坑实录

摘要：注意，这里有一个坑，在开发者工具上回调是不会被调用的，只有在手机上才有效。 open-data头像如何设置样式设置成 { display: block; overflow: hidden; } 就可以正常设置样式了，包括圆形头像等用户授权按钮设计思路授权按钮设计成全屏透明的，用户点击屏幕任意位置即可发起授权小程序中使用Promise 引用npm中的es6-promise即可；...

xiyang 2019-08-29 15:37 评论0 收藏0
浏览器本地存储

摘要：浏览器本地存储在较高版本的浏览器中，提供了和。单个保存的数据不能超过，很多浏览器都限制一个站点最多保存个。浏览器本地存储在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage html5中的Web Storage包括了两种存储方式：sessionStorage和loca...

oysun 2019-08-22 15:58 评论0 收藏0
HTML 面试题总结

摘要：不区分大小写的声明是在中，声明引用，因为基于。标签名必须用小写字母。应当写在中，以避免页面元素由于样式确实造成瞬间的白页或者给用户闪烁感。一旦遇到错误，立刻停止解析，并显示错误信息。，，不支持，，，支持。 doctype(文档类型) 的作用是什么？声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。有以下两个值：怪异模式，浏览器使用自己的怪异模式解...

oujie 2019-08-02 10:14 评论0 收藏0
面试题总结

摘要：所以个人建议将登陆信息等重要信息存放为其他信息如果需要保留，可以放在中和属性的异同共同点对内联元素设置和属性，可以让元素脱离文档流，并且可以设置其宽高。不同点仍会占据位置，会覆盖文档流中的其他元素。说说你对闭包的理解使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。闭包有三个特性：函...

RiverLi 2019-08-20 17:33 评论0 收藏0