如何让前端浏览器不进行缓存_前端接口防止被缓存-优快云博客

本文链接：https://blog.youkuaiyun.com/Roger_CoderLife/article/details/83021360

当浏览器要访问一个某个资源时，浏览器会通过资源的URL来判断是否读取缓存中的内容。由于浏览器存在缓存，所以会导致服务器上的内容修改了，但是在浏览器却显示没有变化。

为了解决这个问题，可以在每次请求的时候加一个随机数参数或者时间戳。它的作用就是让浏览器误以为请求的是一个新链接，这样浏览器就不会去读取缓存里的内容。

代码如下：

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="utf-8" />
		<!--设置过期时间设置0为直接过期并清除缓存-->
		<meta http-equiv="Expires" content="0">
		<!--设置不缓存页面-->
		<meta http-equiv="Pragma" content="no-cache">
		<!--设置不修改消息存储-->
		<meta http-equiv="Cache-control" content="no-cache">
		<!--同上-->
		<meta http-equiv="Cache" content="no-cache">
		<title>test</title>
	</head>
	<body>
		<div id="test">
		</div>
	</body>
	<script type="text/javascript">
		//js后缀加个时间戳每回更新都会改变，浏览器视其为新的js不会进行缓存
		document.write('<script type="text/javascript" src="js/test.js?time='+new Date().getTime()+'"><'+'/'+'script>');
		//css也同上
		document.write('<link rel="stylesheet" href="css/test.css?time=' + new Date().getTime() + '"/>');
	</script>
</html>

弊端：因为缓存可以减少对服务器的直接访问，减少服务器的压力。浏览器不读取缓存里的内容之后，每次都会访问服务器，这样就会增加服务器的压力。

作者：Roger_CoderLife

链接：https:blog.youkuaiyun.com/Roger_CoderLife/article/details/83021360

本文为Roger_CoderLife的原创文章，著作权归作者所有，转载请注明原文出处，欢迎转载！