proxy代理不同域时cookie写入失败解决方法

问题

最近项目对接口进行安全改造,需要用到一个Path=/aaa的cookie值,但是本地开发环境会出现cookie丢失的问题,因为本地开发环境转发地址都是http://192.168.0.1:8080/aaa,这不符合set-cookie里面的Path限制,这样请求就会丢失用于安全的cookie.

解决方案

最简单粗暴的解决方案
修改项目目录,添加一个aaa的文件夹,把开发环境的需要的静态资源和页面文件放到aaa文件夹下,开发环境下访问项目地址改成http://localhost:8485/aaa。显然这个方案有缺陷,如果cookie path 改变,我们又需要再次改变项目目录结构,可能还需要修改webpack配置(或者其他打包配置)
或者后台将Path修改为/,意味着后台服务端口后面不加项目名,此时set-cookie时满足 / 的地址,可以设置成功。

nginx 代理的方式

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

location /{
    ...
    proxy_pass http://localhost:8000;
    proxy_cookie_path /aaa /;
    ...
}

原理是代理转换了cookie的path,从/aaa,转换成/。这样项目就不用做任何修改了。

webpack-dev-server 解决方案

了解前面两个方案之后,我们来看看重头戏,项目没有使用nginx作为代理,而是使用webpack-dev-server(^2.4.5)提供的代理功能,我们改怎么来配置呢?相信比较熟悉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=\/api/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=\/aaa/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丢失的问题。

补充

最新的webpack-dev-server3.1.5已经支持配置cookiePathRewrite,依赖于http-proxy的更新

cookiePathRewrite: {
  "/unchanged.path/": "/unchanged.path/",
  "/old.path/": "/new.path/",
  "*": ""
}

http-proxy最新版1.17.0支持cookiePathRewrite配置修改cookie路径,而http-proxy-middleware最新版本也更新了依赖的http-proxy版本;我们查看webpack-dev-server3.1.5依赖的http-proxy-middleware的版本也是最新版0.18.0

所以现在修改cookie的path更简单了:

devServer:{
    proxy:{
        cookiePathRewrite:{
            "/old.path/": "/new.path/",
        }
    }
}

参考:

https://github.com/nodejitsu/node-http-proxy
https://github.com/chimurai/http-proxy-middleware
转载于:https://juejin.im/post/5b59334a6fb9a04fe44ba9e0

你可能感兴趣的:(前端项目代理配置)