【知识梳理】跨域请求：跨子域名共享 Cookie​

I_can
185 阅读2分钟

项目启动背景：

image.png 项目启动使用了 whistle 代理，使用 m-test1.yyb.qq.com 来访问项目。
且在控制台手动注入登录态相关的 cookie： logintype, mobileqaccesstoken, mobileqopenid.

问题：

访问项目页面，查看控制台 network 发现有个接口，报了 401 的错误码。

image.png

401: 代表客户端错误，指的是由于缺乏目标资源要求的身份验证凭证，发送的请求未得到满足。\

解决：

原因： 查看报错接口的请求头没有携带 cookie。

  1. 团队大佬指点，在请求配置中加上 withCredentials: true. 如：在 axios 请求，在 headers, data 同级下加入。具体看 axios 官网文档，检索下 withCredentials.

    withCredentials 作用： 前端设置 withCredentials: true, 跨域请求携带凭据信息(请求时 headers 塞入可用 cookie，后文细讲可用)
    服务端也要设置 Access-Control-Allow-Origin 指定域名，不能为 *。值设置为当前项目访问域名。且设置 Access-Control-Allow-Credentials: true.

    前端请求 withCredentials 设置为 true，发现还是 401 的错误码，请求头还是没有携带上 cookie.

  2. 团队大佬让我截图下 cookie信息(下图)。发现有同源的限制，iwan.yyb.qq.com(请求接口的域名) 拿不到 m-test1.yyb.qq.com(项目启动代理的域名) 下的 cookie 。所以导致请求头拿不到登陆凭证相关的 cookie。
    注入登录态 cookie ：
    image.png

    关键操作： 修改 cookie 中 domain 。设置为 .qq.com。
    【原因：子域名访问到父域名的 cookie。(结尾再拓展下)】 image.png

    1、2步骤都操作完，发现接口通了，且请求头也携带上了修改 domain 为 '.qq.com' 的 cookie。 image.png

解决总结：

  1. 请求配置设置 withCredentials: true。
  2. 修改 cookie 中的 domain 为父域名（先理解为 共有域名）.

拓展

image.png 域名的结构图。
上文所提及的父子域名：级别高的域名为下一级域名的父域名。
.com 是 .qq.com 的父域名。
.qq.com 是 yyb.qq.com 的父域名。
yyb.qq.com 是 m-test1.yyb.qq.com 的父域名。
yyb.qq.com 也是上文请求 iwan.yyb.qq.com 的父域名。
子域名是可以访问到更高级别域名的 cookie。
上文处理将 m-test1.yyb.qq.com 下 cookie 中 domain 修改为 .qq.com。若修改为 .yyb.qq.com，iwan.yyb.qq.com的请求也是可以获取到登录态相关的 cookie。

P.S. 将 Cookie 的 domain 属性设置为 .com（顶级域名）会导致 不可预测的行为，且绝大多数浏览器会出于安全考虑 拒绝设置此类 Cookie。

该知识的实用场景：单点登录（目前没有实操过，无法输出）。

avatar
文章
阅读
粉丝