ie浏览器一直是程序员的噩梦。项目在谷歌浏览器上完美运行。在ie浏览器上,缓存问题真心恶心。后台查看了资料说在接口上加上时间戳或随机数就行了。要是这样干,工作量真心大啊。后来我对我们公司大神封装的axios进行修改。

修改前POST请求:

export const postRequest = (url, params, method) => {
// debugger
//base = getCookie("server_context_gi");
// alert(`${base}${url}`);
if(method == "form") {
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
transformRequest: [function(data) {
let ret = ''
for(let it in data) {
if((typeof data[it]) === 'object') {
data[it] = JSON.stringify(data[it])
}
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
} else if(method == "json") {
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
});
}
}

修改后:

export const postRequest = (url, params, method) => {
//base = getCookie("server_context_gi");
// alert(`${base}${url}`);
if(method == "form") {
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
transformRequest: [function(data) {
let ret = ''
for(let it in data) {
if((typeof data[it]) === 'object') {
data[it] = JSON.stringify(data[it])
}
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
ret = ret + 'n=' + encodeURIComponent(Math.random())
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
} else if(method == "json") {
if(params){
if(typeof(params)=='string'){
let p1 = JSON.parse(params);
p1['n'] = encodeURIComponent(Math.random());
params=JSON.stringify(p1);
}else{
params['n'] = encodeURIComponent(Math.random());
}
}
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
});
}
}

修改前get请求:

export const getRequest = (url) => {
//base = getCookie("server_context_gi");
// alert(`${base}${url}`);
return axios({
method: 'get',
url: `${base}${url}`
});
} export const searchRequest = (url, params) => {
// base = getCookie("server_context_gi");
let ret = '';
for(let it in params) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(params[it]) + '&'
}
return axios({
method: 'get',
url: `${base}${url}` + "?" + ret
});
}

修改后:

export const getRequest = (url) => {
//base = getCookie("server_context_gi");
// alert(`${base}${url}`);
if(url.indexOf("?") != -1){
url = url + "&n="+encodeURIComponent(Math.random())
}else{
url = url + "?n="+encodeURIComponent(Math.random())
}
return axios({
method: 'get',
url: `${base}${url}`
});
} export const searchRequest = (url, params) => {
// base = getCookie("server_context_gi");
let ret = '';
for(let it in params) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(params[it]) + '&'
}
ret = ret + "n=" + encodeURIComponent(Math.random())
return axios({
method: 'get',
url: `${base}${url}` + "?" + ret
});
}

这样就解决了ie缓存问题,这样修改的关键点是只要修改封装的axios即可,其他的不用修改。

解决vue项目在ie浏览器缓存问题。的更多相关文章

  1. node-express脚手架生成的项目中实现浏览器缓存

    前言: 最近在做基于 node-express 的个人站点 朵朵视野 ,在站点发布之后自己在访问测试的过程中发现站点是没有缓存机制的,这样就导致每次访问站点都需要重新去加载资源,很消耗资源以及用户体验 ...

  2. 如何解决vue项目中 scss 不支持 scoped 的 /deep/ 穿透写法

    如何解决vue项目中 scss 不支持 scoped 的 /deep/ 穿透写法 用过vue的人估计都用过scoped样式属性,但有时候需要穿透样式,啥办? 很多资料都说用>>> 或 ...

  3. Vue项目添加动态浏览器头部title

    0. 直接上 预览链接 + 效果图 Vue项目添加动态浏览器头部title 1. 实现思路 ( 1 ) 从路由router里面得到组件的title ( 2 ) title存vuex (本项目已经封装h ...

  4. vue项目强制清除页面缓存

    异常描述: 支付宝中内嵌h5项目(vue框架开发),前端重新打包上传之后访问页面会导致页面空白.页面tab点击异常之类异常情况,需要手动清除支付宝缓存才可以正常访问. 解决方案: 在HTTP协议中,只 ...

  5. Vue项目兼容IE浏览器

    转载:https://blog.csdn.net/qq_24956515/article/details/77527668 Vue项目部署到服务器后,通常除IE浏览器外其他都正常,而IE浏览器会报这么 ...

  6. 如何让vue项目兼容IE浏览器

    一般来说项目开发到后期都需要做各种兼容性处理例如:360.IE9以上.QQ浏览器....等等 那么现在来介绍一个工具 babel-cli 跟 babel-preset-es2015 babel-cli ...

  7. 引用静态资源的url添加版本号,解决版本发布后的浏览器缓存有关问题

    在日常的工作中,我们经常会遇到页面文件(html,jsp等)中引用的js,css,图片等被修改后,而浏览器依然缓存着老版本的文件,客户一时半会看不到修改后的效果,同时也给生产环境的版本发布带来了一些问 ...

  8. vue项目中阻止浏览器返回上一页

    vue项目中在某个页面阻止浏览器返回上一页,适用移动端.PC端. 使用场景例如: 首页 与 A页面     来回跳转,那样点击浏览器返回时也会来回跳转,本想当页面在首页的时候就不再返回了,所以这个时候 ...

  9. 解决 VUE项目过大nodejs内存溢出问题

    今天在启动vue项目的时候报了这样一个错误, 如图所示:频繁出现此种情况,项目太大,导致内存溢出,排除代码问题外,可参照以下方式解决 // 全局安装increase-memory-limit npm ...

随机推荐

  1. Does Swift support aspect oriented programming?

    The foundation of Aspect Oriented Programming is the intercept pattern. We start with a crosscutting ...

  2. cc2530中单片机的通用I/O接口

    cc2530中有21个输入/输出引脚. 这些引脚可以设置为通用I/O或者设置为外设I/O.(其实这里的外设还是不太懂到底指什么,网上说输入设备,但是通用I/O也可以输入啊,为什么要弄外设I/O?) 其 ...

  3. Python I/O编程 -- 序列化

    序列化 pickle模块,json模块 (1)把变量从内存中变成可存储或传输的过程,称之为序列化.Python中叫pickling,其他语言中也被称为serialization,marshalling ...

  4. 如何判断当前脚本运行在node还是浏览器中

    判断global对象,如果是window,就是运行在浏览器中,如果global对象是undefined,则运行在node中.

  5. linux高性能服务器编程 (九) --I/O复用

    第九章 I/O复用 I/O复用就是一个线程可以同时监听多个文件描述符,提高程序性能.虽然I/O复用可以同时监听多个文件描述符,但是它本身是阻塞的,如果多个文件描述符准备就绪,如果不采取措施它仍然是串行 ...

  6. selenium 基本操作

    #前进 driver.back() #后退 driver.forward() #刷新 driver.refresh() #退出 driver.quit() #获取所有 cookie cookies=d ...

  7. Phoenix概述

    Phoenix是Salesforce.com开源的一个项目,可以让开发者在Apache HBase上执行SQL查询. Phoenix查询引擎会将SQL查询转换为一个或多个HBase scan,并编排执 ...

  8. 【Beta】Phylab 测试报告

    PhyLab Beta 测试报告 测试中发现的bug Beta阶段新Bug Bug 可能原因 markdown生成的报告可能溢出显示框 表格过长,显示框未设置横向溢出 移动端实验区无法评论 移动端社区 ...

  9. http请求的header的一个小细节

    今天前后端联调的时候无论如何后端都搜不到前端的token,以为是公司全局网关拦截了token,最后发现也不是,最终在无意之中发现http请求的header的key不能带有下划线,比如app_token ...

  10. dubbo源码分析之过滤器Filter-12

    https://blog.csdn.net/luoyang_java/article/details/86682668 Dubbo 是阿里巴巴开源的一个高性能优秀的服务框架,使得应用可通过高性能的 R ...