express/axios
获取不到header中的某些字段
问题:axios响应拦截中,取不到后端配置在header中的字段,响应拦截中只有:
headers: {
cache-control:"private, must-revalidate",
content-type:"application/json"
}
但是浏览器network中可以看到后端配置的字段
解决:
浏览器只能访问以下默认的响应头
- Cache-Control
- Content-Language
- Content-Type
- Expires
- Last-Modified
- Pragma
如果想让浏览器能访问到其他的响应头的话需要在服务器上设置Access-Control-Expose-Headers
,如:
res.header("Access-Control-Expose-Headers", "authorization");
跨域携带cookie
问题1:跨域请求想要携带cookie
解决:
cookie本是不允许跨域访问的,想要实现跨域发送cookie,需要cookie从请求头中传输过去,在axios中需要配置Axios.defaults.withCredentials = true;
问题2:配置了Axios.defaults.withCredentials = true;
直接导致跨域失败,检查后端代码,后端有正常配置允许跨域:
res.header("Access-Control-Allow-Credentials", true);
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "authorization, Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, X-Requested-By, If-Modified-Since, X-File-Name, X-File-Type, Cache-Control, Origin");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS,PATCH");
res.header("Access-Control-Max-Age", 1728000); //预请求缓存20天
res.header("Access-Control-Expose-Headers", "authorization");
解决:当后端配置的Access-Control-Allow-Origin
为*
时,cookie不会出现在http的请求头里,而前端又配置了Axios.defaults.withCredentials = true;
,导致需要发送的cookie没能成功写入,此时需要把*
改成具体的源地址,例如http://localhost:8080
,有需要时也可以直至从请求头中取对应的地址
第三方验证码插件cookie失效
问题:项目写到一半,遇到个奇怪的问题,有一小部分同事的电脑上访问局域网我的vue-cli3.0的后台管理系统项目,一直无法登录进去,接口一直返回验证码失效的提示。
解决:
1、遇到这个问题首先想到的是浏览器兼容问题,结果询问了一遍有问题的同事,大家统一都用的是谷歌浏览器,排除浏览器兼容问题。
2、还是不死心,感觉应该是各个机器的差异,而不应该是代码的问题,因为大部分同事访问是有效的,小部分同事才出问题,于是让有问题的同事进行了一遍傻瓜式修复操作:清除缓存 → 重启浏览器 →重装浏览器,还是没有解决
3、和后端讨论,得知原来这个验证码插件是需要携带cookie进行请求的,于是着重研究cookie这一块的浏览器配置和代码配置,对比了有问题和没问题的电脑浏览器配置,仔细检查了黑名单等列表,还是没找到异常处
4、开始怀疑自己开头的判断,难道是代码问题?检查了一下axios配置,有配置上一节刚解决的跨域携带cookie,再对比两台电脑的请求,响应内容,发现了一个小区别:
有问题的浏览器响应头多了个
Set-Cookie
字段,并且后面带有一个⚠警告
5、接近真相了,继续和后端讨论,得知后端接口debug时,问题浏览器的请求少了一个sessionid,并且对比两个浏览器发现,正常浏览器响应头没有
Set-Cookie
字段,但是F12Applocation
中Cookies里能查到当前页面的JSESSIONID
,而问题浏览器中F12Applocation
中Cookies里没有JSESSIONID
,大胆猜测,是不是刚才响应头里的警高导致JSESSIONID
没有正常保存
6、到这里,几乎可以确定是
cookie
保存或者传输出问题了,突然想到F12console
中一直有一个关于cookie的警告没有去处理,开始怀疑:
抱着侥幸的心理去搜了一下这个警告,真的搜出有用的东西了!阿里云社区大佬总结的解决方案:
标题是:关于 Chrome (谷歌浏览器)升级到 80 后可能产生的影响以及解决方案
原文地址:https://developer.aliyun.com/article/743364
复制一下大佬的总结(侵删):
方案一
Chrome 中打开 chrome://flags/#same-site-by-default-cookies 和 chrome://flags/#cookies-without-same-site-must-be-secure ,设置为 Disabled ,重启浏览器
方案二
降级到 Chrome 79 及以下版本,并关闭自动更新
方案三 (适用于 API)
将 API 切换为 HTTPS 协议(需要有 SSL 证书),并且检查响应头中的 Set-Cookie 中是否包含了 SameSite=None 和 Secure字样
如果没有 HTTPS 协议的 API, 请尝试 方案一 或 方案二
方案四
改造 http 服务,购买 SSL 证书,升级到 https 服务,并执行方案三