关于数据交互

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