解决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 ...
随机推荐
- ECMAScript规范解读this
在<JavaScript深入之执行上下文栈>中讲到,当JavaScript代码执行一段可执行代码(executable code)时,会创建对应的执行上下文(execution conte ...
- DOM是浏览器提供给开发者的语柄、套接字、文件接口
DOM是浏览器提供给开发者的语柄.套接字.文件接口
- HDU-1848-Fibonacci again and again(SG函数,博弈)
链接: http://acm.hdu.edu.cn/showproblem.php?pid=1848 题意: 任何一个大学生对菲波那契数列(Fibonacci numbers)应该都不会陌生,它是这样 ...
- SPU、SKU、ARPU
在涂涂商城开发之前,发现一篇关于电商中 SPU.SKU.ARPU 的介绍,转至博客,原文地址:http://www.ikent.me/blog/3017 什么是SPU.SKU.ARPU 首先,搞清楚商 ...
- CTSC 2017 游戏[概率dp 线段树]
小 R 和室友小 B 在寝室里玩游戏.他们一共玩了 $n$ 局游戏,每局游戏的结果要么是小 R 获胜,要么是小 B 获胜. 第 $1$ 局游戏小 R 获胜的概率是 $p_1$,小 B 获胜的概率是 $ ...
- GoCN每日新闻(2019-11-08)
GoCN每日新闻(2019-11-08) GoCN每日新闻(2019-11-08) 1. Go Modules: v2及更高版本使用 https://blog.golang.org/v2-go-mod ...
- UDF——已知入口压力和流量计算压降
有时候我们在计算内流,比如管道内的流动时,只知道入口压力和流量,而我们想要计算得到出口的压力,这个应该怎么办呢?当然新版本的Fluent已经自带了流量出口边界,而这里我们采用Fluent的UDF来实现 ...
- OpenFOAM——不对称突变管道中的低雷诺数流动
本算例来自<ANSYS Fluid Dynamics Verification Manual>中的VMFL064: Low Reynolds Number Flow in a Channe ...
- 欧拉法求解常微分方程(c++)
#include<iostream> #include<iomanip> using namespace std; int main() { double x, y, h; ...
- Android Sensor详解(1)简介与架构【转】
本文转载自:https://blog.csdn.net/u013983194/article/details/53244686 最近在学习有关如何porting sensor的东西,仅借此机会写博客来 ...