provisional headers are shown问题排查

时间:2024-10-22 16:59:44

问题背景

在业务中实现一个上传文件的功能,为了减少文件在服务器流转的次数,直接给前端在目标服务器上开放了一个api,用于上传文件, 在对接时前端发送请求时出现了 provisional headers are shown 报错请求直接被取消了。前端同学 搜索了下 就说是跨域问题,可以后端明明写了允许跨域,但问题依然存在。
通过搜索引擎发现该问题出现的原因无外乎以下几点:

  • 跨域,请求被浏览器拦截
  • 请求被浏览器插件拦截
  • 服务器出错或者超时,没有真正的返回
  • 强缓存from disk cache或者from memory cache,此时也不会显示

但是没有具体的排查过程,这里记录下排查过程。本文不写解决方法 因为我是后端人员 不太懂前端,只是排查出了问题边界。

结论

这里先写结论: 后台的接口为https, 但是签名使用的是自签名证书,前端访问该接口时ssl 握手失败 浏览器直接将请求取消了。 解决思路:1. 前端发送请求时忽略证书 2. 后端使用机构颁发的证书。

排查流程

在这里插入图片描述

  1. chrome 打开 chrome://net-export/ 单击start Logging to disk 按钮 选择日志文件保存的地址 注:net-export用于排查浏览器的TCP/IP 问题.旧版本使用net-internals
  2. chrome 请求刚刚失败的接口,请求后回到net-export 页面 单击stop。
  3. 打开 / 选择我们刚刚保存下来的日志文件 选择 Envent。出现以下页面
    在这里插入图片描述
  4. 找到刚刚请求的地址 查看其日志。逐个排查后找到了关键的报错信息。 这里告诉我们 ssl 握手失败了, 也就是请求根本就没有发送出去就被取消了,排除了后端的的问题
    在这里插入图片描述
  5. 回到请求接口的页面 F12 点击Security 标签,观察到刚刚的请求被取消了, 也就验证了步骤4的结论
    在这里插入图片描述
    在这里插入图片描述

验证

浏览器地址栏直接输入api的一个get 请求的地址,出现以下页面,该页面出现的原因是 使用的证书为自签名证书,浏览器不信任该证书。
在这里插入图片描述
单击继续前往。该操作其实是忽略指定地址的证书。

重新调用失败的接口 发现成功了。所以该碰见Provisional headers are shown 的原因是因为证书不被浏览器信任 请求直接被取消了。

解决思路

  1. 前端请求指定接口时忽略证书
  2. 后端使用机构颁发的证书