前后端联调对接支付接口那天,满屏跨域报错拦着,绕来绕去的问题根源就是不会正确获取session,后台接口反复校验登录状态直接拒绝请求,前后端两个人对着控制台耗了整整一下午。
一开始盯着浏览器存储面板瞎翻,总觉得session会像cookie一样明明白白躺在本地缓存列表里,翻遍应用存储、本地存储、会话存储三个板块,连sessionId的字符片段都找不到,当时只觉得前端本地压根存不住这份信息,下意识判定后端返回逻辑存在漏洞,还跑去拉后端同事同步排查接口返回参数。
后端同事拉过来接口响应头,指着Set-Cookie字段说session全部依托这个响应字段下发,前端不用手动存储,浏览器会自动留存对应的会话标识,当时没吃透这个逻辑,依旧执着在前端代码里写请求携带逻辑,手动拼接session字符串塞进请求头,发送请求之后后台依旧判定登录失效,接口直接返回401状态码。
折腾好久才搞明白,前端原生发起请求时,默认不会自动带上服务端下发的cookie,自然没法同步对应的session信息,项目里封装的axios请求实例没有开启携带凭证的配置项,这才是整条链路卡顿的核心原因。
翻出项目全局请求配置文件,找到创建axios实例的代码块,原本默认的withCredentials参数处于关闭状态,改动这一行配置之后,重新发起登录请求,登录接口的响应头完整带出Set-Cookie,浏览器自动保存对应的session标识,后续所有业务接口发起请求时,请求头都会自动附上对应的cookie信息,后台服务同步读取到session完成身份校验。
当时还顺手测试过原生fetch请求的处理方式,原生接口请求默认不会同步cookie,需要手动在请求参数里添加credentials字段,设置为include才能同步携带session相关凭证,只是项目整体统一使用axios封装请求,没有大面积改动原生请求写法。
中途还踩过域名跨域的额外麻烦,本地开发环境前端端口和后端服务端口不一致,后端服务没有配置允许前端跨域携带凭证,就算前端配置全部调整完毕,浏览器依旧会拦截请求附带的cookie,控制台弹出跨域资源共享的报错提示,后端调整跨域白名单,补充对应的Access-Control-Allow-Credentials响应头之后,跨域拦截问题才彻底消除。
下班收拾开发工具的时候,指尖敲着键盘反复回想下午的调试流程,明明后端返回的session标识完整下发,前端却因为基础请求配置缺失,白白浪费大把时间反复排查接口参数,全程没往请求跨域和请求凭证配置上靠拢。