我正在使用ReactJS开发我的项目，而且我使用create-react-app来创建我的应用程序。在构建项目之后，我使用我的服务器来提供build文件夹。当我更新我的应用程序时，用户的浏览器仍然使用我的应用程序的旧版本，因为它缓存了静态文件(js、css)。那么有没有办法防止浏览器缓存静态文件呢？谢谢！
ReactJS：如何防止浏览器缓存静态文件？
8
- Phuong
1
这可能会回答你的问题。 - Chaim Friedman
3个回答
9
TLDR: 你需要通过HTTP头发送缓存指令。
Cache-Control头有几个指令来控制缓存行为、过期和验证。
缓存行为：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control Cache-Control: public 资源可以被任何缓存缓存
Cache-Control: private 资源只能被浏览器缓存
Cache-Control: no-store 设置浏览器总是从服务器请求资源
Cache-Control: no-cache 这告诉浏览器缓存文件，但在检查服务器以验证我们是否拥有最新版本之前不使用它。此验证是使用ETag头完成的。(https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag)
Cache-Control头有几个指令来控制缓存行为、过期和验证。
缓存行为：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control Cache-Control: public 资源可以被任何缓存缓存
Cache-Control: private 资源只能被浏览器缓存
Cache-Control: no-store 设置浏览器总是从服务器请求资源
Cache-Control: no-cache 这告诉浏览器缓存文件，但在检查服务器以验证我们是否拥有最新版本之前不使用它。此验证是使用ETag头完成的。(https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag)
- Esther Cuan
1
2我找到了一篇详细解释这个问题的文章：https://medium.com/@codebyamir/a-web-developers-guide-to-browser-caching-cc41f3b73e7c - Esther Cuan
1
假设您已禁用了PWA，您可能希望在public/index.html中添加这些行。
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
- Poyoman
2
1现在不建议使用像这样的元标记，因为它不是有效的HTML5。为什么？因为只有浏览器才能解析并理解元标记，而中间缓存则不能。应始终通过HTTP头发送缓存指令。 - vsync
@vsync 但是当您不一定进行xhr调用时，如何在页面上设置请求/响应标题？ 这些是请求还是响应标题？ - Chris Maggiulli
1
Create React App提供服务工作者，它会在客户端缓存各种文件。
如果您想要，可以注销服务工作者。
但请注意，您将无法像PWA那样在离线模式下提供应用程序。
- R Jaya Kumar Reddy
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接