在做公司前后端分离项目的时候通常使用webpack的proxyTable做代理,只需要配置好约束信息,就可以随心所欲的跨域了。
在我入职的新公司采用的是前端配置hosts文件指定xxx.com到127.0.0.1,这样在xxx.com登录之后,可以和localhost共享cookie实现鉴权。
虽然他能解决跨域的问题,但是我觉得不够简便,对新同学也不够友好,所以我想着手改造一下,改造成在项目启动之后,如果没有登录,跳转到本地登录页面,点击登录就可以实现鉴权,因为鉴权是放到cookie的,本地的地址localhost是不能把cookie携带到xxx.com的set-cookie中的,这就造成了我们不能共享cookie,所以面临两个问题:
1.开发登录页,So easy!
2.把登录成功后返回的cookie放到以后所有的接口resquest headers 的set cookie中
config/index.js
至于第二步就比较麻烦了,浏览器是不让我们通过js获取api内的cookie的,除非cookie在当前domain下,那么我们是否可以使用webpack来做呢,答案是可以的:
dev配置如下
proxyTable: {
'/api': {
target: 'http://test.xxx.com', //目标接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': '/' //重写接口
},
// 关键部分
cookieDomainRewrite: {
'*': 'localhost' // 把相应的 cookie 域都设置成 localhost,也可以配置成自己电脑的ip,或者指定的域名
}
}
}
网友评论