关于数据交互

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 服务,并执行方案三

你可能感兴趣的:(关于数据交互)