前端开发bug记录(一):浏览器缓存问题

前端 - 浏览器缓存导致二次下载图片失败 今天遇到个很经典的问题,涉及范围从 浏览器缓存 到 网络,所以记录下,以备之后遇到的时候可以快速定位。 bug发生背景: 有一个这样的需求,如下图所示,页面可以预览到一个加密过的图片的列表(这里的重点是,图片和页面是不同源,也就是我们常说的跨域了),查看图片的时候ok的,显示完美,但是呢,一旦点击右上角的“下载文件”就有问题了,会报跨域的错误(下图二)。 这里有个前提是关于图片下载的... 阅读详情

开发过程中使用file-saver插件保存图片到本地问题。
页面上有两个需要保存文件到本地的地方,一个是保存pdf到本地,一个是保存图片到本地,使用的是相同的方法,都是file-saver的saveAs方法。
savaAs的保存方法分两种形式,一种是同源的形式,会直接使用a标签加download的形式下载到本地,另一种就是跨域的形式,会使用类似于请求先请求文件到本地,然后转换成blob形式保存到本地。此次问题使用的就是后一种形式。但是在使用过程中保存pdf的可以正常使用,保存图片的却一直报错跨域,经过一番询问排查发现当浏览器禁用缓存时,图片可以正常下载,在这里插入图片描述
但是取消之后再刷新页面点击保存图片就会失败。知道了跟缓存有关,但是却不知道这里到底发生了什么,等研究明白了再更。最后解决的方法解释再请求后面加上随机数。

	const downloadImgClick = () => {
		savaAs(`${url}&randomNum=${new Date().getTime()}`, fileName);
	};
如何排查和解决UC浏览器引入的历史记录拦截bug问题 这次的“灵异事件”让我深刻意识到,浏览器行为的异常可能不仅仅是由于我们自己的代码问题,有时第三方浏览器的行为也可能导致意想不到的结果。在开发过程中,我们应当密切关注浏览器的兼容性问题,特别是在一些特殊的浏览器(如UC、QQ浏览器等)上进行充分的测试。在处理此类问题时,除了排查自己的代码之外,我们还需要关注是否有浏览器或第三方插件/脚本影响了正常的浏览器行为。希望这篇文章能够帮助开发者在遇到类似问题时,能够迅速定位并解决问题,避免影响用户体验。 阅读详情

相关推荐

Google Chrome插件:实时刷新清空缓存

在网页开发、测试和日常使用中,浏览器缓存的存在虽然可以加快页面加载速度,但同时也带来了不少麻烦。当开发者或用户需要看到最新的网页内容时,缓存可能阻止了新数据的更新。针对这一问题,一款专门针对Google Chrome浏览器设计的刷新清空缓存插件应运而生。此插件通过集成在浏览器的工具栏中,提供了快速刷新页面并同时清除缓存的功能,从而确保用户每次都能获取到最新状态的网页内容。

weixin_35755188的博客 1114

vue中,使用file-saver导出文件,下载Excel文件、下载图片、下载文本

导出

weixin_44867717的博客 2万+

Visual Studio报错TRK0005找不到CL.exe?三步彻底解决环境变量问题

本文详细解析了Visual Studio报错TRK0005找不到CL.exe的根本原因,并提供了三步彻底解决环境变量问题的方案。从验证安装完整性到配置永久环境变量,再到注册表级修复,帮助开发者建立健壮的开发环境配置体系,确保编译链稳定运行。

weixin_30839881的博客 459

Vue使用File-saver保存excel文件和转为图片保存

【代码】Vue使用File-saver保存excel文件和转为图片保存。

hrcsdn13的博客 697

光学薄膜设计入门:Essential Macleod中文版从安装到实战全攻略

本文为光学薄膜设计初学者提供Essential Macleod软件从安装部署到实战应用的全流程中文指南。详细解析了软件核心界面、材料管理及工作流程,并通过一个完整的宽带增透膜设计实例,手把手演示膜系构建、优化与分析方法,帮助用户快速掌握这一业界标杆工具,跨越理论与实操的门槛。

weixin_29309475的博客 987

逆向实战:基于内存态匿名段分析的 DexProtector 检测绕过策略

本文深入探讨了针对DexProtector加固方案的Frida检测绕过策略。通过分析运行时动态加载到匿名内存段的核心检测逻辑,提出了一套基于内存态分析、定位并转储匿名可执行段,进而通过精准Hook与“等式化替换”等技术实现稳定绕过的实战方法。该方法不仅适用于DexProtector,也对采用类似内存隐藏技术的加固方案具有参考价值。

ik678901的博客 516

vue中,给一个URL地址,利用FileSaver.js插件下载文件到本地

后台返回文件流Blob或者二进制,前端进行处理下载文件;接口返回下载地址,前端实现下载

weixin_48674314的博客 1万+

【一看就会】Autoware.universe的“规划”部分源码梳理【0】——Planning综述(持续更新中)

单独开一篇planning综述,作为整个规划系列的开篇。本篇综述会持续更新,希望能帮助大家更好的整体理解规划部分。这个部分会持续更新。

weixin_48386130的博客 1966

前端常见问题以及处理方式 - - - (一)浏览器缓存以及解决方法

前端常见问题以及处理方式 - - - (一)浏览器缓存以及解决方法

业余丰富各种技术栈 2万+

Python 实现生命游戏及进化模拟完整指南

生命模拟是进化计算的一个特定子集,模拟了自然界中所观察到的自然过程,例如粒子或鸟群的聚集方式。生命模拟只是用来探索和优化问题的模拟形式之一,还有很多其他形式的模拟,可以更好地建模各种过程,但它们都源于康威生命游戏 (Conway’s Game of Life)。在本节中,我们将介绍生命模拟的基本概念,并使用 Python 实现康威生命游戏。

盼小辉丶的博客 7万+

别让 Claude Code 一直问你“能不能执行“:权限配置完全指南

Claude Code 提供了一套精细的权限配置机制,配置好权限设置,可以提速不少。这个小技巧需要掌握一下。

沐风 3844

工作Bug问题记录

BUG1: 此问题需要为确定键添加一个键盘enter事件,即: 问题解决方法:在输入框上绑定原生enter事件: BUG2: 此问题在火狐浏览器报错,其余浏览器没问题。原因在于火狐浏览器载入tinymce的theme.js失败, 解决方法:在tinymce组件上添加载入theme.js的路径: BUG3: 此问题为标签...

weixin_42231184的博客 508

手把手教你学Simulink——基于Simulink的多轮PMSM同步驱动交叉耦合控制

摘要:本文针对多轮PMSM同步驱动系统的负载不均、参数差异等问题,提出基于Simulink的交叉耦合控制解决方案。通过实时补偿轮间同步误差,实现同步误差<1%、转矩脉动<5%的性能提升。文章详细介绍了系统架构、核心算法(包括PMSM数学模型和偏差耦合控制算法)、Simulink建模步骤及参数设置,并通过仿真验证了稳态和动态性能。同时提供了工程调试建议和完整代码实现,为多轮驱动系统开发提供实用参考。该方案计算量小,可移植性强,适用于电动汽车、AGV等应用场景。

MHD0815的博客 143

bug 由于浏览器缓存而引起的ajax请求并没有获取到服务器最新数据从而导致的bug...

bug 由于浏览器缓存而引起的ajax请求并没有获取到服务器最新数据从而导致的bug   自此之前并没有听说过ajax请求的得来的数据是浏览器的缓存给出的这一说法,由于此次bug情节十分有趣,于是记录下来。        这次开发的前端框架是react, 涉及...

avtcpm1927的博客 317

【异常检测】新版异常检测库anomalib的使用

异常检测库anomalib的使用。

胡侃有料的博客 4390

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

清除本地浏览器缓存的前世今生

1.前言 首先我们需要知道什么情况下浏览器会缓存下来文件,如下图所示: 清除本地浏览器缓存的前世今生 > image2016-11-8 13:47:18.png" src="http://wiki.letv.cn/download/attachments/62270953/image2016-11-8%2013%3A47%3A18.png?version=1&modification

blue1011372655的专栏 2662

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

由于未清除缓存引发的bug

在写页面的时候,首先引入了本地react.js和react-dom.js 16版本(cjs)的文件,出现如下错误 发现bug后,将本地的react.js和react-dom.js文件改成16.2(umd)版本,之后还是一直出现上面的错误。 最后分析原因: 是因为浏览器的缓存没有清除,清除缓存后,bug消失。 由于找bug花费时间较长,特此记录。 转载于:https:/...

a50270的博客 493

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

成长知识点(BUG版)

[toc] 成长知识点(BUG版) **z-index** 复制代码 父元素的z-index和子元素的z-index优先级很不同哦; 两个兄弟元素比较z-index时,最好是position的类型一样的情况下比较: 例如一个是absolute,另一个也是absolute; < a href=" ">< img src="img/logo.png" alt="...

weixin_33842328的博客 249

Vue项目部署后,无需手动清浏览器缓存,自动实现代码更新的方法。

针对此原因入手,可以给打包后的文件增加最新标识的后缀,这里使用时间戳,此外,前端维护一个记录版本号的文件,在用户操作项目的过程中,进行新老版本号的比对,版本号更改时对浏览器缓存进行reload(这样就无需用户手动刷新浏览器缓存),即可保持项目获取最新代码。前端开发在开发过程应该会中经常碰到:修复代码bug后,打包上线,测试人员需要手动清理浏览器缓存才能看到最新的改动,比较繁琐,而且正式上线后也不可能每次代码部署后都要提醒用户去清除浏览器缓存。项目目录public下新建version文件。

Java12324314的博客 2525

前端开发兼容ie9趟过的坑

前言 最近接手了一个银行的项目,合作方要求兼容ie9。之前习惯在chrome浏览器上开发,没有考虑过兼容问题,这次好多在chrome和firefox上都是可以,但是ie9标准版问题千奇百怪,只有你没有想不到的,没有它出不来的!!! 问题集锦 文件上传错乱 根本原因:文件没有清空,上次上传的文件还存在 //之前的写法 $("#id").val(""); //出现错误的问题是ie9不支持,下面是...

笑不语的博客 3034

Vue踩坑记录之ChunkLoadError

记录下这个巨坑(实质上是正则表达式错误,如果已知问题,想看如何解决直接跳到最后)

云帆的博客 2万+

近期前端开发中遇到的bug,认真看完一定会有收获,有感而发,整理又整理,今天做个总结把!

今天,我就来分享几个近期在实验室的出版社项目中遇到的真实问题及解决办法,记录总结一下!

qq_61996308的博客 1021

web UI 测试BUG总结

1. 文字显示问题  1.1 由于浮动造成的div错位问题(未解决)    受代码本身书写方法所限,这个问题无法完全解决,错误样式见于web UI 测试用例2中   1.2 个别浏览器下的特殊错位问题(未解决)     在360浏览器下发生,错误样式如下图所示,下面的三个选项本应该在右边。该问题应该与1.1一致,但是别的浏览器在1366X768的全屏下并未发生     在chro...

303

google chrome 浏览器 调试时js无法刷新的解决方法

由于以前用的是firefox,强制刷新或者再生成就可以了,但是发现在用chrome调试时js怎么也无法刷新。现总结以下两种方法,供大家借鉴。 方法一: ctrl+shift+i 该快捷键是打开开发者工具的。打开的时候当前页所包含的元素都会刷新一遍,故可以起到刷新的作用。 方法二:  F12后按F1,出现设置界面,勾选Network下的Disable cache选项:  

nnn_net的博客 2万+

web网页测试bug定位详细步骤

1、前置条件1)需要的知识熟透系统业务、团队成员情况;熟悉使用F12或抓包工具;了解HTTP/HTTPS协议;了解系统的架构,数据走向;2)定位前的操作保存bug产生的记录;排除低级问题;包括网络问题、数据问题(脏数据2、定位问题思路和步骤查看页面表现 > 查看状态码 > 接口的请求和返回以及js执行有无报错 > 查看服务器日志 > 配置问题 > 经验或其他1)查看页面表现用户层面问题:用户自己的环境问题或者操作问题。如环境不通或者操作不正确等。

okcross0的博客 1661
上一篇: 对js中call, apply, bind,的一点理解。
下一篇: js函数传参问题
Hello_Tree__
博客等级 码龄8年 3粉丝 14原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值