跨域情况下的set-cookie

14,690 阅读2分钟

这是我参与更文挑战的第1天,活动详情查看: 更文挑战

事情是这样的,这几天做项目,有个登录页面,需要去请求后端接口写入cookie来标记用户id。浏览器提示接口跨域了,但是发现cookie却写入成功了。

按照网上那些文章来说,cookie的设置是受跨域限制的,如果要设置cookie成功,必须前端得设置with-credentials:true,同时后端也要设置对应的Access-Control-Allow-Origin和Access-Control-Allow-Credentials头部。但是现在只有前端设置了,后端并没有设置CORS头,为何cookie也设置成功了??

具体情况如下图:

1.可以看到浏览器提示了,服务端没有设置跨域头

image.png

2.接口响应有对应的set-cookie部分

image.png

3.在浏览器Application里也有看到对应的cookie存在

image.png

说明cookie设置成功了。难道跨域情况下只有前端设置with-credentials,就可以set-cookie成功??

我再次去看了MDN上对set-cookie的介绍,主要说了set-cookie怎么用,这些在网上的大多数文章中都有,不再多做赘述,并没有对跨域情况下做什么介绍。接下来看了一下CORS这块的描述, 也只是说了如果不是前后端都设置跨域,则无法读到响应内容,对于set-cookie并没有细说。我又在网上看了下其他人写的文章,基本都大同小异,要求前后端都设置跨域,没啥收获。

我把自己遇到的这个问题跟同事说了下,问他是不是如果只有前端设置了with-credentials:true,后端不设置跨域头也是可以设置cookie成功的。在他一通思考后,最后他给我的回答是set-cookie应该是跟是否跨域没有关系的!!!用img标签去请求这个接口也可以设置cookie成功,所以浏览器的跨域只是影响前端能否拿到响应,不能影响set-cookie

hmmmm,我当然是不信的,毕竟img默认是不会跨域的;而且CORS跨域情况下如果不设置with-credentials,set-cookie是会直接被忽略的~


最后的最后,经过我不懈努力的搜索和问人(hhhhh),终于找到了答案

image.png

大概意思就是说如果服务端没有配置CORS跨域头,前端是无法读到服务端响应的,但是set-cookie是可以成功的。

结论

跨域情况下的set-cookie:

  1. 前端设置with-credentials:true,后端即使不设置CORS头也可set-cookie成功
  2. 前端不设置with-credentials或者false,set-cookie响应头会被直接忽略

最后,有关cookie设置的其他相关内容请看另一个小伙伴的文章