跨域感知session
跨域感知session需要解决两个问题,第一个是解决跨域问题,第二个是解决跨域cookie传输问题
跨域问题
充分理解跨域问题并解决跨域问题
现在越来越多的项目就算是一个管理后端也偏向于使用前后端分离的部署方式去做,为了顺应时代的潮流, 一前后端分离就产生了跨域问题,所以多同学把跨域和前后端分离项目联系在了一起,其实跨域产生的原因并不是前后端分离导致的,那我们一起来看一下,希望可以靠这一篇文章解答所有的跨域问题
跨域产生的条件
使用xmlHttpRequest,即我们通常说的ajax
请求浏览器做了这个事
访问的域名不同,即访问的html页面是a域名下的,但内部js发送的ajax请求的目标地址却是b域名
以上三个条件缺一不可,尤其是第三个条件许多做移动端的同学可能都没有听过, 因为移动端爽爽的用各种http,请求狂发不同的域名,但是浏览器允许我们这么做,为了一个词安全
如何解决跨域问题
解决跨域问题的根本就是要打破上述的三个限制中的任何一个
解决跨域问题有很多种方式,可以参考本章最后的扩展资料跨域问题的解决方式,我们在一开始的课程视频中使用了springboot自带的crossOrigin注解,如下(注意,和目前的课程中不完全一致,如何演进的继续往下看)
这个注解一加后,所有的http response头上都会加上
Access-Control-Allow-Origin * 以及
Access-Control-Allow-Headers * 两个头部,这样可以满足CORS的跨域定义,我们的ajax看到这两个头部就认定对应的域名接收任何来自或不来自于本域的请求
跨域传递cookie的问题
跨域和跨域传递cookie是两个不同纬度的问题,我们依靠上述的方式解决了跨域的问题,但是要做到跨域感知session需要解决在跨域的前提下将cookie也能传上去,这个时候就需要设置另外一个头部 ,我们的cross origin演变为
使用了allowCredentials后Access-Control-Allow-Credentials头被设置成true,同时前端设置xhrField:{withCredential:true}后,浏览器在ajax请求内带上对应的cookie头部和后端的allowCredentials配合在一起解决跨域传递cookie的问题。由于课程中仅仅使用了get和post的方法,而这两个方法在跨域请求中都是可以用的,因此allowedHeaders可以不加。
另外当设置了allowCredentials = “true”的时候origins = {”*“}就失效了,因为一旦设置了跨域传递cookie就不能再设置接受任何origins了,而springboot的实现方式是返回的allow origin取request内的origin即我们自己对应的html页面的路径。这样就可以做到在哪个origin上使用跨域就允许哪个origin,一样能达到我们想要的效果。
ps:许多浏览器包括safari和最新版本的chrome默认设置都是不支持携带跨域cookie的,即便我们代码写成允许,浏览器底层也做了限制,因此在调试的时候我们可以关闭对应的限制,也可以使用扩展阅读内的其他跨域处理方式