get请求缓存问题

背景

最近开发一个需求，需要打开一个第三方的页面，在打开之前需要先使用get请求 header中携带认证信息，去对第三方系统进行调用认证，从而保证可以打开第三方的系统。

问题

需求开发完 却发现只有第一次是正常调用get请求进行认证的，后续再打开第三方的系统都是无效的，通过第三方系统的日志发现 后面并没有对第三方系统进行调用get请求认证。但是在项目里通过打断点和看控制台 network， 发现在打开第三方系统之前都进行了get请求，通过fiddler截到的日志也是显示调用了get认证请求。

原因

通过在部署项目的服务器抓包，发现除了第一次发起了get认证请求，后续的请求都没有发现调用get认证请求，于是就考虑是浏览器的问题了。此时就发现原因是出现在ajax的缓存了，在浏览器中，get请求是有缓存的，Ajax在发送的数据成功后，会把请求的URL和返回的响应结果保存在缓存内，当下一次调用Ajax发送相同的请求时，它会直接从缓存中把数据取出来，这是为了提高页面的响应速度和用户体验。当前这要求两次请求URL完全相同，包括参数。这个时候，浏览器就不会与服务器交互。
所以问题的原因就找到了，是因为第一次调用get鉴权请求成功，会把响应结果保存在缓存中，所以后续的get认证请求就走缓存了，发起了get请求，但是并没有调用到第三方平台的接口。

如何避免ajax get缓存

1. 改为post请求

最直接的方式就是改为post请求，post不会有缓存，但是这种方式是不推荐的，可能接口就是get接口，不支持post请求。

2. 拼接随机参数

ajax get请求缓存的一个前提就是url地址需要一致，才会走缓存，所以也可以通过拼接一个随机的参数来使得请求url不一致来避免缓存。 一般都是拼接?time=new Date().getTime(); 时间戳重复的情况几乎不可能出现

2. 拼接header头信息

在发送的ajax请求中header中添加 “Cache-Control”:”no-cache” 参数配置

4. jquery 封装的ajax添加传参

如果是使用的jquery封装的ajax,可以使用ajax提供的一个参数. cache设置为false

$.ajax({
          type: 'get',//get请求时
          url: '........',
          cache: false,//不缓存
          data: { },
          success: function (result) {
              //
          }
      });