Better

Ethan的博客,欢迎访问交流

provisional headers are shown 与跨域传递 cookie

近日本地开发时,请求头总显示 provisional headers are shown,但是功能完全是正常的,线上却没有这个问题,表示有点困惑。

provisional headers are shown

对于这个问题,我记得很多以前我也查阅过,但是并没有找到符合我情况的解答。

中文意思为:显示临时报头,但为什么是临时的呢?大致原因是,请求已经发出,但没有得到正确的响应。网络查阅大致有如下几种情况

  • 跨域,请求被浏览器拦截
  • 请求被浏览器插件拦截(比如 adBlock)
  • 服务器出错或超时,没有真正返回
  • 强缓存 from disk cache 或者 from memory cache

经排查:我的情况肯定不属于属于后面三种情况,第一种情况确实有可能,因为我线上是不存在这个问题的,本地确实是跨域的情况。

由此引出一个问题,针对本地环境,服务端是如何进行登录态校验的呢?因为在跨域的情况下,cookie 是无法写入和传递的,而且我也没发现使用 header 传递 token 的情况

在跨域的情况下,并不是完全不能传递 cookie,HTTP 协议提供了一个开关,如果开启则可以传递 cookie。

客户端

  • xhr 请求,添加 withCredentials: true
  • fetch 请求,添加 credentials: 'include'

服务端

  • 设置响应头:Access-Control-Allow-Credentials: true
  • 注意点:服务器端设置 Access-Control-Allow-Credentials: true时,参数 Access-Control-Allow-Origin 的值不能为 '*'

chrome 查看问题

既然在跨域的情况下可以传递 cookie,而且服务端确实也是这么做的,那么为什么看不到 set-cookie 和 cookie 的头信息呢。更加奇葩的是,我把本地所有 cookie 都清除了,服务端知道我的登录态。

一时之间,觉得很神奇,后来通过抓包发现,请求其实是由 cookie 的,只是在 chrome 查看不到而已,而且使用 firefox 浏览器一切都是正常的,能看到完整的头信息。

chrome 为什么这么做,没有查到正式的说明,不知道是 bug,还是从安全角度特意为止了。



留言