尝试Chrome扩展程序写登陆页面

由于项目分为好几个模块，所以每次运行某个模块的时候都需要粘贴cookie在proxy配置里。所以考虑写一个Chrome扩展程序，把登陆放在页面上。下面是略带心酸的探索过程。。。。

第一版：首先我考虑的是搞一个弹出框，完全符合Chrome扩展程序的样子。需要登陆就点一下图标，出现登陆框。然后插件调用登陆接口拿到cookie，放进本地。问题：扩展程序发送请求origin是扩展程序的，不是真正页面发送的（比如localhost），而且扩展程序和实际页面不是一个，所以cookie也存不到页面的cookie里。需要通过background.js通讯传给页面在存。好的，涉及到代码注入啦～～

第二版：既然需要代码注入，那么不如连登陆都注入进去好了。这样连origin的问题都解决了。真棒！！然后呢发现了Tampermonkey这个Chrome插件。这是个帮你把插件架子搭好的插件。你只要把需要注入的脚本放进去就行了。于是我开始了原生js的creatElement的坎坷之路。问题：一个登陆没几个东西洋洋洒洒写了一堆。。。这后面要是有新功能需要维护怎么办。很明显这代码太缺心眼了。于是考虑第三版。。。

第三版：在大佬的安利下了解了一个神仙打包工具parcel。想写什么写什么。比如想写react，直接在顶部引入一个react就行了。打包的时候parcel会自动帮你安装react并打包你的代码。极速零配置Web应用打包工具！！！真的太棒了。只要把打包之后的js扔进Tampermonkey就可以了。Tampermonkey可以直接引入脚本路径。所以你可能需要起个服务器把脚本扔上去搞个路径回来给Tampermonkey。还有css也是可以的。有兴趣的可以去看一下API。又到了问题环节：拿回来set-cookie不会放进cookie里。res.headers能拿到别的字段，但是却拿不到set-cookie。了解了一下，原因可能是跨域不能拿cookie，请求头和响应头domain不一致浏览器不care你。心酸。。。。

第四版：终于找到了解决方法

'*': {

target: 'www.baidu.com',

secure: false,

changeOrigin: true,

onProxyReq: (proxyReq) => {

console.log('the cookie: ', cookie);

// proxyReq.setHeader('withCredentials', true);

// proxyReq.setHeader('Cookie', 'User-Token=7bc107a5-dd1e-4f06-ab41-8955fc8dbab3');

if (cookie) {

proxyReq.setHeader('Cookie', cookie);

// req.headers['Cookie'] = cookie;

}

},

onProxyRes: (proxyRes) => {

Object.keys(proxyRes.headers).forEach((key) => {

if (key === 'set-cookie' && proxyRes.headers[key]) {

const cookieTokens = proxyRes.headers[key].reduce((acc, header) => {

const tokens = header.split(';');

return acc.concat(tokens);

}, []);

cookie = cookieTokens.filter(element => element.includes('User-Token')).join(';');

}

});

},

},

在项目的proxy里面配置上这个。搞一个全局变量保存cookie，在发请求的时候拦截一下加上cookie。看起来好像解决了。但是！！！如果你的配置devServer的proxy是数组没问题，如果是object，会有排列的鬼问题。就是发请求的时候加不上。焦头烂额的时候发现把上面的都注掉就好了  后面才知道是对象排列的问题。掉接口的时候可能就跳过去还是覆盖怎么样。

好的，现在我的Chrome扩展程序开发完了。最后决定跟后端同学要个万能key，以后掉接口不用cookie了。破玩意！！！