美文网首页
关于数据交互

关于数据交互

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

相关文章

  • 关于数据交互

    express/axios 获取不到header中的某些字段 问题:axios响应拦截中,取不到后端配置在head...

  • 前后台交互的学习(Java web)

    标签:前后端交互Javaweb 下面介绍了一些关于交互的细节: 1.请求数据 前端提供请求数据。 在开发中,后台在...

  • 关于node中数据交互的理解

    什么是数据交互? 数据交互是httpd协议中常见的,数据交互顾名思义就是我把数据传输给你,你再把数据返回给我,这么...

  • python multiprocessing Queue and

     多进程通过Queue和Pipe交互数据的开销对比。相比Pipe,通过Queue交互数据,进程之间数据交互有更大的...

  • android中的广播机制回调和接口回调

    android中有很多需要数据交互的部分,交互的方式也有很多种不同,四大组件各有各的方法, 今天主要是谈谈关于回调...

  • uni学习笔记分享

    目录介绍 01.遇到问题汇总 02.关于布局设置 03.基础语法总结 04.关于交互问题 06.关于回传数据 07...

  • 刚刚,我在游戏里成为了盲人——谈谈交互设计

    最近做数据新闻选题的时候,我被各种交互设计折磨得头皮发麻。今天我想简单地聊聊关于交互设计的问题。 其实大家也知道,...

  • vue2.0 + Element + vue-cli + res

    今天,准备写一个关于前后台数据交互,用vue2.0 + Element + vue-cli + resource开...

  • 数据交互

    1 jquery-form的方式提交数据 自定义上传的数据 文件篇 前台使用ajaxupload.js对文件进行上...

  • 数据交互

    概述 客户端和服务器之间交互的时候,客户端不仅可以发送请求给服务器,还可以把一些内容传递给服务器;服务器接收到请求...

网友评论

      本文标题:关于数据交互

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