如今前后端分离的的开发模式越来越成为主流,前后端分离的开发模式确实给开发带来了诸多便利, 但也带来了一些小问题,比如跨域的问题,因为前后端分开的开发模式,在开发过程中前端项目和后端项目运行在不同的源下,所以跨域问题成了前后端分离开发过程中的主要问题。
这几天,我在做一个前端小项目的时候也遇到了跨域问题,由于后台接口调用的是别人的接口,而该接口没有提供跨域访问,所以不得不使用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