美文网首页
关于数据交互

关于数据交互

作者: 95Sunny | 来源:发表于2020-08-14 11:19 被阅读0次

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

    相关文章

      网友评论

          本文标题:关于数据交互

          本文链接:https://www.haomeiwen.com/subject/mjoddktx.html