webpack-dev-server使用proxy跨域cookie问题

如今前后端分离的的开发模式越来越成为主流,前后端分离的开发模式确实给开发带来了诸多便利, 但也带来了一些小问题,比如跨域的问题,因为前后端分开的开发模式,在开发过程中前端项目和后端项目运行在不同的源下,所以跨域问题成了前后端分离开发过程中的主要问题。

这几天,我在做一个前端小项目的时候也遇到了跨域问题,由于后台接口调用的是别人的接口,而该接口没有提供跨域访问,所以不得不使用webpack-dev-server的proxy进行跨域,开始的时候一切正常,用的舒服了,后来在访问一些需要登录的接口就有问题了,虽然我也调用它的接口做了登录功能,但是登录过后的cookie一直无法保存到本地。之后去查看了登录接口,发现其登录接口的返回的响应头中的set-cookie中设置了domain选项,由于项目在本地跑的时候是localhost,和接口的域名不一致,所以导致浏览器无法保存cookie。接着去查阅了webpack-dev-server的相关文档,终于找到了解决了办法。

在webpack-dev-server的每个代理请求中的配置项中有一个onProxyRes的配置项,该配置项是一个函数,可以在代理收到请求之后将数据发给浏览器之前做一层拦截,我们可以在这里修改set-cookie中domain为localhost,这样浏览器就可以把cookie保存下来,同时在请求的时候也把cookie发送出去
说了那么多屁话,该放点代码上去了

devServer: {
   
    port
  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值