sunmaobin / sunmaobin.github.io

blog
https://github.com/sunmaobin/sunmaobin.github.io
174 stars 11 forks source link

JS解惑-跨域cookie文件 #22

Open sunmaobin opened 7 years ago

sunmaobin commented 7 years ago

本文主要说一个容易理解错误的地方,和常见的2种跨域方式。

概念

经常有人会说,如何解决跨域cookie携带的问题,具体指哪里的cookie呢?

我们知道,既然跨域了,那么前台和后台肯定不在同一个域上,也就是出现了两个域。

比如:

  1. 前端的域为:www.page.com
  2. 后台的域为:www.back.com

那么,使用www.page.com调用www.back.com的接口时,是携带哪个的cookie呢?

明确告诉你,是www.back.com。

这个写出来大家可能都知道,但是实际中有时候就搞混了,比如,你通过chrome F12看到当前页面www.page.com下有cookie,但是就是请求后台接口www.back.com的时候没携带上,你就说跨域了,没带cookie有问题。

其实,你应该是去看www.back.com这个域下本身有没有cookie!!!

对于这个问题,我也犯了一次混。

就是在手机H5页面上,H5是通过Webview打开的,H5所在的域下面手机客户端写了一堆cookie。但是与后台通信的时候,命名配置了跨域处理,而且允许携带cookie了,但是就是没带到后台。现在大家知道为什么了吧?

场景

为什么跨域操作要携带参数给后台,有一种场景可能经常用。

比如:前台后完全分离的系统,前台登录后,后台会写入一些登录的凭证到cookie,以后前台再调用后台接口的时候,如果后台接口的cookie的数据能在请求的时候自动携带上,那么后台就可以校验,请求是否合法。

跨域的2种常见处理

  1. 使用CORS跨域处理,参考:阮一峰-跨域资源共享 CORS 详解
  2. jsonp处理(这个不能带cookie,而且其实全部是get请求)

补充

对于无法携带cookie的情况,前台可以用参数的形式将后台需要的数据,再每次调用接口时传递,但是这种情况,安全性就是个考研。