解决vue项目在ie浏览器缓存问题。
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浏览器缓存问题。的更多相关文章
- node-express脚手架生成的项目中实现浏览器缓存
前言: 最近在做基于 node-express 的个人站点 朵朵视野 ,在站点发布之后自己在访问测试的过程中发现站点是没有缓存机制的,这样就导致每次访问站点都需要重新去加载资源,很消耗资源以及用户体验 ...
- 如何解决vue项目中 scss 不支持 scoped 的 /deep/ 穿透写法
如何解决vue项目中 scss 不支持 scoped 的 /deep/ 穿透写法 用过vue的人估计都用过scoped样式属性,但有时候需要穿透样式,啥办? 很多资料都说用>>> 或 ...
- Vue项目添加动态浏览器头部title
0. 直接上 预览链接 + 效果图 Vue项目添加动态浏览器头部title 1. 实现思路 ( 1 ) 从路由router里面得到组件的title ( 2 ) title存vuex (本项目已经封装h ...
- vue项目强制清除页面缓存
异常描述: 支付宝中内嵌h5项目(vue框架开发),前端重新打包上传之后访问页面会导致页面空白.页面tab点击异常之类异常情况,需要手动清除支付宝缓存才可以正常访问. 解决方案: 在HTTP协议中,只 ...
- Vue项目兼容IE浏览器
转载:https://blog.csdn.net/qq_24956515/article/details/77527668 Vue项目部署到服务器后,通常除IE浏览器外其他都正常,而IE浏览器会报这么 ...
- 如何让vue项目兼容IE浏览器
一般来说项目开发到后期都需要做各种兼容性处理例如:360.IE9以上.QQ浏览器....等等 那么现在来介绍一个工具 babel-cli 跟 babel-preset-es2015 babel-cli ...
- 引用静态资源的url添加版本号,解决版本发布后的浏览器缓存有关问题
在日常的工作中,我们经常会遇到页面文件(html,jsp等)中引用的js,css,图片等被修改后,而浏览器依然缓存着老版本的文件,客户一时半会看不到修改后的效果,同时也给生产环境的版本发布带来了一些问 ...
- vue项目中阻止浏览器返回上一页
vue项目中在某个页面阻止浏览器返回上一页,适用移动端.PC端. 使用场景例如: 首页 与 A页面 来回跳转,那样点击浏览器返回时也会来回跳转,本想当页面在首页的时候就不再返回了,所以这个时候 ...
- 解决 VUE项目过大nodejs内存溢出问题
今天在启动vue项目的时候报了这样一个错误, 如图所示:频繁出现此种情况,项目太大,导致内存溢出,排除代码问题外,可参照以下方式解决 // 全局安装increase-memory-limit npm ...
随机推荐
- HTML实现调用百度在线翻译API
HTML实现调用百度在线翻译API 本文章已收录于: <!doctype html> <html lang="en"> <head> < ...
- MongoDB shell 4 用户管理方法
方法名 描述 db.getUsers() db.dropAllUsers() db.updateUser() db.createUser() db.revokeRolesFromUse ...
- React的基本使用
一.初始化和安装依赖 ①建立项目文件夹 mkdir react-democd react-demo ②在项目里执行命令:初始项目 npm init -y ③安装相关依赖 npm install --s ...
- Python 检查代码占用内存 工具和模块
只介绍简单的使用, 更多使用方法请查看官方文档 tracemalloc 官方文档 tracemalloc文档地址 使用 import tracemalloc tracemalloc.start() # ...
- BZOJ2151/洛谷P1792 题解
若想要深入学习反悔贪心,传送门. Description: 有 \(n\) 个位置,每个位置有一个价值.有 \(m\) 个树苗,将这些树苗种在这些位置上,相邻位置不能都种.求可以得到的最大值或无解信息 ...
- AntDesign-React与VUE有点不一样,第一篇深入了解React的概念之一:JSX
AntDesign-React与VUE有点不一样,第一篇深入了解React的概念之一:JSX 一.什么是JSX 使用JSX声明一个变量(REACT当中的元素): const element =< ...
- 如果要对一些数据做处理,可以直接用自定义fliter
{{[offer.brand, offer.series, offer.model] | carFilter}} filters里面写 carFilter ([brand, series, model ...
- python 操作es
Elasticsearch 是一个开源的搜索引擎,建立在一个全文搜索引擎库 Apache Lucene™ 基础之上. Lucene 可能是目前存在的,不论开源还是私有的,拥有最先进,高性能和全功能搜索 ...
- 高并发&高可用系统的常见应对策略 秒杀等-(阿里)
对于一个需要处理高并发的系统而言,可以从多个层面去解决这个问题. 1.数据库系统:数据库系统可以采取集群策略以保证某台数据库服务器的宕机不会影响整个系统,并且通过负载均衡策略来降低每一台数据库服务器的 ...
- [技术博客]nginx 部署 apt 源
[技术博客] nginx 部署 apt 源 出于各种各样的原因, 有时需要自己配置apt源, 比如发布自己编写的debian软件包, 内网中只有一台电脑可以访问外网,或者在本地配置自己的apt源.我们 ...