Springboot Vue2 开启HTTP缓存、304缓存（协商缓存）、Cache-Control 不生效

已于 2023-08-11 15:27:23 修改
阅读量821 收藏
点赞数
文章标签： http 缓存 网络协议
于 2023-08-11 15:23:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_46064703/article/details/132231497
版权
文章讲述了开发者在项目中遇到的问题：如何启用HTTP缓存优化图片加载，以及在从HTTP切换到HTTPS时遇到的cache-control失效问题。通过分析发现是缺少SSL证书导致，最终通过mkcert生成本地证书解决了兼容性问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近开发过程中发现图片这类静态资源更换并不频繁，所以无需每次都从服务器请求。于是使用了HTTP缓存来实现图片缓存。
在这里插入图片描述
在这里插入图片描述
开启HTTP缓存很简单，如上图则可。

但重复刷新多次并关闭浏览器重新打开缓存依然不生效！！

在这里插入图片描述
随后发现url处的红色不安全图标，于是想起开发环境中是使用了https 在这里插入图片描述
在这里插入图片描述

于是尝试将其关闭

在这里插入图片描述在这里插入图片描述
页面刷新发现，成功了！

http请求是成功了，但是上线之后是需要用https请求的。

于是使用mkcert生成本地证书并导入，来判断是否由于无SSL证书导致的在https中cache-control 不生效
在这里插入图片描述
在这里插入图片描述

有ssl证书后，https也成功了。
在这里插入图片描述

Nginx静态资源缓存策略配置
杨春建的博客
09-16 4381
原文地址：https://blog.youkuaiyun.com/yu12377/article/details/77875045 1. 问题-背景 以前也经常用nginx，但用的不深，通常是简单的设置个location用来做反向代理。直到今天给客户做项目碰到缓存问题：客户有个app，只是用原生做了个壳，里面的内容都是用h5写的，我们半途接手将新版本静态资源部署到服务器上后，发现手机端一直显示老的页面，一...
三十三、【vue面试题】性能优化-浏览器缓存策略（2021/5/3）
weixin_41033048的博客
05-03 445
强缓存 浏览器的缓存策略-强缓存 Cache-control pubric表示响应可以被客户端和代理服务器缓存- private表示响应只可以被客户端缓存 max-age=3缓存30秒后过期，需要重新请求 s-maxage=30覆盖max-age，作用一样，只在代理服务器中生效- no-store 不缓存任何响应 no-cache资源被缓存，但是立即失效，下次会发起请求验证资源是否过期- max-stale=30 30秒内，即使缓存过期，也使用该缓存 min-fresh=30希望在30秒内获取最新的响.
在Spring Boot中实现HTTP缓存的方法
10-17
缓存是HTTP协议的一个强大功能，但由于某些原因，它主要用于静态资源，如图像，CSS样式表或JavaScript文件。本文重点给大家介绍在Spring Boot中实现HTTP缓存的方法，感兴趣的朋友跟随小编一起看看吧
springBoot--web--http缓存机制测试
m0_50207524的博客
10-21 641
一套系统适配多端数据返回import com/*** @date 2023年10月21日 12:50// 支持哪种媒体类型 super(new MediaType("text" , "yaml" , Charset . forName("UTF-8")));> clazz) {// 只要对象类型，不要基本类型 return true;
HTTP缓存介绍及在spring boot中设置HTTP缓存
热门推荐
Hello World ^—^
06-20 1万+
介绍 在工作之余阅读缓存相关的书籍时，看到了http缓存相关的知识，HTTP 缓存机制是一个 web 性能优化的重要手段，无论是做前端还是做web后台，都可能会用得到它，应该是知识体系库中的一个基础环节，以前这一块学的不是很扎实，现在巩固巩固。 HTTP缓存可以说是浏览器缓存的其中一种，浏览器缓存也包含很多内容： HTTP 缓存、indexDB、cookie、localstorage 等等。这里我...
java cache-control_Cache-Control设置不起效
weixin_35738080的博客
02-13 1127
使用的是SpringMVC，将“json”字符串配置成了一个view Bean。class="org.springframework.web.servlet.view.json.MappingJackson2JsonView"/>然后查看MappingJackson2JsonView源代码发现，父类中有个参数disableCaching默认为ture。注解：Default is {@cod...
Spring Boot 控制 HTTP API 缓存
小魏的奇妙世界
05-24 4082
Spring Boot控制 HTTP API 缓存，减少 网关传输压力和服务压力
解决Vue入口文件index.html缓存问题
Elon丶的博客
09-27 2930
之前每次发版vue项目的时候，总是要强制刷浏览器才能生效。 vue-cli里的默认配置，css和js的名字都加了哈希值，所以新版本css、js和就旧版本的名字是不同的，不会有缓存问题。 但是把打包好的index.html放到服务器里去的时候，index.html在服务器端可能是有缓存的，这需要在服务器配置不让缓存index.html 解决方法如下： 前端在index.html中添加： <meta http-equiv="Expires" content="0"> <meta h
【优化】Nginx 配置页面请求不走缓存 浏览器页面禁用缓存
m0_74823715的博客
01-06 494
要配置Nginx使其不缓存内容，通常是指禁止浏览器缓存响应的内容，或者是在代理某些内容时不让任何缓存机制生效。在你的Nginx配置中，如果你想要为整个服务器或特定的location配置不缓存内容，你可以按照下面的方式进行修改。考虑到你的配置已经包含了多个location块，我们可以分别在需要的地方添加不缓存的设置。这样设置后，所有从这个Nginx服务器发出的响应都会包含这些头信息，告诉浏览器和其他中间缓存设备不要缓存内容。如果你希望整个服务器的所有请求都不被缓存，可以在。是你要阻止缓存的具体路径。
强缓存和协商缓存-面试必会
qq_16546829的博客
04-01 1283
一文彻底搞懂前端缓存
SpringBoot 集成Ehcache实现缓存
11-02
使用springboot 集成ehcache，里面附带数据库建库脚本，controller，service以及对ehcache集成，操作的详细样例，使用spring注解形式。
Cache-Control和Expires无效的原因
dieang2090的博客
01-07 2828
在用chrome访问一个网站时会发现不同的请求有的被缓存了有的没有， 但他们都有相同的Response Header信息比如： Accept-Ranges:bytes Cache-Control:public, max-age=31295475 Connection:Keep-Alive Content-Language:en Content-Length:15448...
Spring Cache无效的问题以及解决办法
iteye_3748的博客
04-20 941
[url]http://stackoverflow.com/questions/24164014/how-to-enable-http-response-caching-in-spring-boot [/url] [url=http://edu.51cto.com/index.php?do=lession&id=142071]Spring-Cloud课程[/url] [code="j...
SpringBoot 缓存
dickysun1987的专栏
06-23 620
SpringBoot 缓存简单实用
SpringBoot 缓存&资源优化
_hello_world_的博客
08-15 1441
页面缓存 1. freemarker 的页面静态化 application.properties 配置实现浏览器缓存 # SPRING RESOURCES HANDLING ([ResourceProperties](https://github.com/spring-projects/spring-boot/tree/v1.5.4.RELEASE/spring-boot-autoc...
还不会在 SpringBoot 中设置 HTTP 缓存？来造个轮子~
<sdffdsfsdfdfs>sfsfsfsdfsdffds</sdfsDS>Fsd
09-03 284
????????关注后回复“进群”，拉你进程序员交流群????????作者丨小魏来源丨Java知音（ID：Java_friends）Spring Boot 控制 HTTP缓存HTTP协议的缓存策略可以缩短网页请求资源的距离，减少延迟，节省网络流量，并且由于缓存文件可以重复利用，降低网络负荷，加快客户端响应。如何利用 HTTP缓存 进行一些骚操作呐，是我最近思考的问题。查看了Spring Boot对HTTP缓存的支持也...
如何在SpringBoot中设置HTTP缓存，你知道么？
weixin_44421461的博客
10-03 1487
点击上方“Java基基”，选择“设为星标”做积极的人，而不是积极废人！每天14:00更新文章，每天掉亿点点头发...源码精品专栏原创 | Java 2021超神之路，很肝~中文详细注释的开源项目RPC 框架 Dubbo 源码解析网络应用框架 Netty 源码解析消息中间件 RocketMQ 源码解析数据库中间件 Sharding-JDBC 和 MyCAT 源码解析作业调度中间件 Elast...
SpringBoot和缓存
菜鸟清风http://www.hphblog.cn/
04-09 5793
Spring Boot的初体验和自动配置的探究 ： 简介JSR是Java Specification Requests的缩写，意思是Java 规范提案。是指向JCP(Java Community Process)提出新增一个标准化技术规范的正式请求。任何人都可以提交JSR，以向Java平台增添新的API和服务。JSR已成为Java界的一...
vue打包发布后缓存问题
最新发布
03-25
<think>嗯，用户现在问的是Vue打包发布后的缓存问题。我需要先理解这个问题的背景。通常来说，当开发者用Vue构建应用，打包发布后，浏览器可能会缓存静态资源，导致用户看不到最新的版本。这确实是一个常见的问题，特别是当更新频繁的时候。 首先，我得回忆一下Vue的打包机制。Vue CLI默认会在生成的文件名中添加哈希值，比如app.123abc.js。这个哈希是根据文件内容生成的，如果内容没变，哈希不变，浏览器就会用缓存。但用户可能没有正确配置，或者服务器设置有问题，导致缓存策略不当。 接下来，用户可能遇到的症状是，即使部署了新版本，用户还是看到旧版，因为浏览器还在用缓存的旧文件。这时候需要解决方法，比如修改文件名哈希、配置服务器头，或者使用版本控制。 然后，我需要考虑不同的解决方案。常见的包括利用Vue的哈希文件名，配置Webpack的output，使用HTML的meta标签禁止缓存，或者通过服务端配置缓存策略。另外，用户可能还不太清楚如何验证是否生效，所以需要指导他们如何检查。 还要注意用户可能的误区，比如以为改版本号就能解决问题，但实际上浏览器的缓存可能还是根据文件名来的。另外，如果用户没有正确配置服务器，比如Nginx或Apache的缓存头设置，也会导致问题。 可能用户已经尝试过一些方法但没成功，比如没有正确设置Cache-Control头部，或者哈希没有正确生成。这时候需要详细说明每一步的正确做法，并强调服务器配置的重要性。 另外，用户可能想知道如何自动化版本管理，比如结合CI/CD流程，或者在构建时自动生成版本号。这部分内容虽然高级，但对于持续部署的场景很重要，应该提到。 最后，要确保回答结构清晰，分点列出解决方案，并给出具体的配置示例，比如Webpack的配置修改，Nginx的配置片段，这样用户可以直接参考应用。同时提醒注意事项，比如哈希策略的原理，避免重复劳动，以及用户可能需要根据实际情况调整缓存时间。</think>以下是针对 Vue 项目打包发布后缓存问题的完整解决方案，包含原理分析和具体实践步骤： --- ### 一、缓存问题现象 - **用户端表现**：部署新版本后，用户仍看到旧版页面 - **根本原因**：浏览器缓存了旧版静态资源（JS/CSS/字体等） - **典型场景**： 1. 文件名未变化导致强缓存生效 2. 服务器配置了过长的缓存策略 3. index.html 未配置禁用缓存 --- ### 二、核心解决方案 #### 方案 1：文件名哈希策略（Vue CLI 默认方案） ```javascript // vue.config.js module.exports = { filenameHashing: true, // 默认开启 configureWebpack: { output: { filename: '[name].[contenthash:8].js', chunkFilename: '[name].[contenthash:8].js' } } } ``` **原理**：根据文件内容生成唯一哈希，文件变化时哈希值自动更新 --- #### 方案 2：HTML 文件禁用缓存 ```nginx # Nginx 配置示例 location = /index.html { add_header Cache-Control "no-cache, no-store, must-revalidate"; add_header Pragma "no-cache"; add_header Expires 0; } ``` **原理**：强制浏览器每次请求都校验 HTML 文件的新鲜度 --- #### 方案 3：版本号注入（推荐组合方案） ```javascript // main.js const version = process.env.VUE_APP_VERSION || Date.now(); __webpack_public_path__ = `/static/${version}/`; ``` 打包时注入版本号： ```bash VUE_APP_VERSION=2.0.1 npm run build ``` --- ### 三、Webpack 进阶配置 #### 1. 提取 Manifest 防止 chunk 缓存 ```javascript // vue.config.js module.exports = { chainWebpack: config => { config.optimization.runtimeChunk('single'); } } ``` #### 2. 分割稳定依赖 ```javascript configureWebpack: { optimization: { splitChunks: { cacheGroups: { vendor: { test: /[\\/]node_modules[\\/](vue|vue-router|vuex)[\\/]/, name: 'vendors', chunks: 'all' } } } } } ``` --- ### 四、服务器配置示例 #### Nginx 最佳实践 ```nginx # 静态资源长期缓存 location /static/ { alias /path/to/dist/static/; expires 365d; add_header Cache-Control "public"; } # HTML 文件禁用缓存 location / { try_files $uri $uri/ /index.html; expires -1; add_header Cache-Control "no-cache"; } ``` --- ### 五、自动化部署方案 #### 1. 结合 CI/CD 的版本管理 ```yaml # GitLab CI 示例 build: stage: build script: - VUE_APP_VERSION=$(date +%s) # 使用时间戳作为版本号 - npm run build artifacts: paths: - dist/ ``` #### 2. 清除旧版本资源 ```bash # 保留最近 5 个版本 ls -dt /var/www/app/static/* | tail -n +5 | xargs rm -rf ``` --- ### 六、验证与调试方法 1. **浏览器 Network 面板**： - 检查文件是否携带新哈希值 - 查看响应头 `Cache-Control` 和 `ETag` 2. **CURL 命令验证**： ```bash curl -I https://example.com/static/js/app.abc123.js ``` 3. **缓存清除测试**： ```javascript // 强制刷新方案 window.addEventListener('load', () => { if (window.performance.navigation.type === 1) { // 普通刷新 window.location.reload(true) // 强制清除缓存 } }) ``` --- ### 七、注意事项 1. **CDN 缓存**：需配置 CDN 刷新机制 2. **Service Worker**：需处理更新逻辑 ```javascript // sw.js self.addEventListener('install', (event) => { self.skipWaiting(); // 强制激活新 Service Worker }); ``` 3. **版本回滚**：保留历史版本静态文件目录 --- 通过组合使用文件名哈希、版本控制和服务端配置，可有效解决 Vue 项目的缓存问题。建议生产环境采用：**HTML 文件禁用缓存 + 静态资源长期缓存 + 自动化版本管理**的综合策略。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值