Cordova页面缓存、$http缓存与CORS预检缓存的相互影响问题咨询

核心原因分析 #

• 客户端$http请求头携带的缓存控制字段干扰预检缓存：你在请求头中添加了Pragma: no-cache、Expires: -1、Cache-Control: no-cache,must-revalidate三个缓存禁用头，这类头会被浏览器识别为跳过本地缓存的标识，同时会作用于CORS预检缓存，强制浏览器每次发起请求前都重新发送OPTIONS预检请求。
• 服务端CORS配置语法错误：你当前.htaccess中的Access-Control-Max-Age配置用了冒号分隔键值，不符合Apache Header指令的语法规范，该响应头实际没有正确返回给客户端，浏览器会使用默认的预检缓存有效期（多数浏览器默认仅5秒，部分老旧WebView甚至更短），自然会出现几分钟就重新触发预检的现象。
• CORS预检缓存的匹配规则限制：预检缓存不是按域名全局复用的，而是按「请求源+目标URL+请求方法+请求头集合」的组合键匹配缓存，视图1调用getInfo.php、视图2调用searchInfo.php属于不同的目标URL，本身就无法复用同一缓存条目。
• WebView的硬限制：多数Cordova使用的Chromium内核WebView，对Access-Control-Max-Age的生效上限做了强制截断，最大仅支持2小时（7200秒），即使配置24小时也不会生效更久。

修复步骤 #

1. 修正服务端.htaccess配置语法，将错误的冒号配置替换为空格分隔：

# 原错误配置：Header always set Access-Control-Max-Age: 86400
# 修改为以下内容
Header always set Access-Control-Max-Age 7200

修改完成后可通过curl发送OPTIONS请求验证响应头是否正确返回Access-Control-Max-Age字段。
2. 移除$http请求头中的三个缓存控制字段，该类配置应放在服务端API的响应头中实现响应数据不缓存，放在客户端请求头只会干扰本地缓存规则：

var headers = {
  'Content-Type' : 'application/json',        
  'X-Requested-With' : 'com.mydomain',
  Authorization : 'Token ' +clientToken[0]
} ; 

3. 若要彻底避免CORS预检请求，可更换Cordova网络请求方案：接入cordova-plugin-advanced-http插件使用原生层发送网络请求，原生请求不受浏览器CORS规则限制，不会产生OPTIONS预检请求。

内容的提问来源于stack exchange，提问作者rolinger