nginx 配置浏览器不缓存文件 每次都会从服务器 请求新的文件

这篇具有很好参考价值的文章主要介绍了nginx 配置浏览器不缓存文件 每次都会从服务器 请求新的文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

解决问题

适用于实时更新数据的,网页
可以让用户每次都是重新请求,新的index.html
防止过期文件,影响用户体验
有时候更新了js 文件 ,但是用户的浏览器则不会立即更新js文件的缓存
从而造成用户体验不佳
优点,每次都能打开最新的页面
缺点 ,会增加服务器负荷


方法

要在 Nginx 中禁用缓存,你需要在相关的 location 配置中添加禁用缓存的指令。通常你可以使用 Cache-Control 和 Pragma 头来达到这个目的。

以下是如何在 Nginx 中禁用缓存的示例配置:

server {
    # ... 其他配置 ...
    location / {
        add_header Cache-Control "no-cache, no-store, must-revalidate";
        add_header Pragma "no-cache";
        add_header Expires "0";
        # ... 其他配置 ...
    }
}

说明

在这个示例中,我们在根路径的 location 配置中添加了三个头信息:

Cache-Control: no-cache - 表示不缓存
Cache-Control: no-store - 表示不存储缓存
Cache-Control: must-revalidate - 表示客户端必须验证资源是否过期
Pragma 头通常用于向旧版本的 HTTP/1.0 客户端发送指令。添加 “no-cache” 值会防止缓存文件。

Expires 头的值设置为 “0” 表示资源已经过期。

通过这些配置,Nginx 会指示浏览器不要缓存这些文件,而是每次都向服务器发起请求获取最新的内容。完成配置后,记得重新加载 Nginx 以使配置生效。


希望对大家有所帮助

测试

准备一个环境

html环境

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>写入句子示例</title>  
</head>  
<body>  
    <div id="sentence"></div>  
    <!-- 这里引入了一个js 文件 -->
    <script src='./index.js'></script>  
</body>  
</html>

js

document.getElementById("sentence").innerHTML = "这是一句话。"; 

环境

实验浏览器 谷歌

第一步

配置好js 之后
打开页面
设置nginx不缓存,运维服务,nginx,缓存,服务器
可以看到 js 已经生效了
设置nginx不缓存,运维服务,nginx,缓存,服务器

然后修改内容 打开带有js缓存的页面

再这里对js 文件进行修改
设置nginx不缓存,运维服务,nginx,缓存,服务器

设置nginx不缓存,运维服务,nginx,缓存,服务器
如果时间短的话则不会重新加载index.js
文件
所以这里没有刷新

强制刷新

当我使用 强制刷新或者清理缓存之后 再打开 就已经修改了
设置nginx不缓存,运维服务,nginx,缓存,服务器

配置nginx 每次打开页面都会重新请求index.js 文件

在域名 的nginx配置文件中添加如下代码即可
设置nginx不缓存,运维服务,nginx,缓存,服务器

重启nginx

# 检查nginx 配置是否正常
nginx -t
# 重启nginx
nginx -s reload

设置nginx不缓存,运维服务,nginx,缓存,服务器
设置nginx不缓存,运维服务,nginx,缓存,服务器

再次修改index.js

设置nginx不缓存,运维服务,nginx,缓存,服务器

设置nginx不缓存,运维服务,nginx,缓存,服务器
可以看到 访问到的就是我们修改的内容没有重新请求
设置nginx不缓存,运维服务,nginx,缓存,服务器

再次修改
设置nginx不缓存,运维服务,nginx,缓存,服务器
也是请求了新的js 没有使用缓存js
设置nginx不缓存,运维服务,nginx,缓存,服务器

总结

修改之前 需要全局刷新,才会重新请求index.js 文件
修改之后,不用全局刷新 ,就可以重新请求到最新的 index.js

设置为全局

http {  
    # ... 其他配置 ...  
  
    map $http_host $cache_control_header {  
        default "no-cache, no-store, must-revalidate";  
    }  
  
    map $http_host $pragma_header {  
        default "no-cache";  
    }  
  
    map $http_host $expires_header {  
        default "0";  
    }  
  
    server {  
        # ... 其他配置 ...  
  
        location / {  
            add_header Cache-Control $cache_control_header;  
            add_header Pragma $pragma_header;  
            add_header Expires $expires_header;  
            # ... 其他配置 ...  
        }  
    }  
  
    # ... 可能还有其他 server 块 ...  
}

设置nginx不缓存,运维服务,nginx,缓存,服务器


本章完结文章来源地址https://www.toymoban.com/news/detail-844470.html

到了这里,关于nginx 配置浏览器不缓存文件 每次都会从服务器 请求新的文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue项目版本打包更新后文件及浏览器存在缓存问题解决方案

    在vue.config.js中配置output,打包后的文件会带时间戳 在public/static目录下新建version.json文件  在src中新建 utils文件夹 文件夹中新建versionUpdate.js文件  在src文件夹下创建addVersion.js  写法二 修改package.json中scripts中的打包命令 版本号自加使用fs修改文件来实现 具体思路是:在执行

    2024年02月11日
    浏览(45)
  • 细说前端打包发布后,浏览器缓存如何清理?其实只需要简单的webpack配置就行

    有没有这么一种场景,项目上线后,客户使用过程中发现了bug,你急急忙忙改完,发布。但你发布后 测试人员或者客户会说:“你这改了没用啊”。 你:“清下缓存试试” 客户:“????” 那么这篇文章带你认识浏览器缓存,及清除浏览器的缓存办法。让你不再为了缓存

    2024年02月09日
    浏览(64)
  • Microsoft Edge浏览器主页被篡改的解决办法(Microsoft Edge浏览器每次打开都是同一个页面)

    Microsoft Edge每次打开都是同一个页面,在设置- - 处修改也没用,这种情况一般是Microsoft Edge浏览器主页被篡改,解决办法如下: 1.桌面右键单击 Microsoft Edge ,选择 属性 ,然后选择 快捷方式, 把 目标 后打开Microsoft Edge后每次出现的页面的网址删除,把这个网址删除并保存即

    2024年02月11日
    浏览(79)
  • 如何清理电脑浏览器缓存,4款常用浏览器清理缓存的方法

    浏览器是人们在网络生活中不可缺少的存在,我们使用各种浏览器上网的时候,可能会出现各种程序出错的问题。或者,可能使用浏览器的时间就了,发现电脑有点卡顿,这时候就需要情况缓存了。那么,如何清理电脑浏览器的缓存呢?下面分享4款常用浏览器清理缓存的方法

    2024年02月04日
    浏览(66)
  • 浏览器缓存(强缓存、协商缓存)

    这一点主要解析浏览器缓存以及缓存机制的详细过程。 与缓存相关的状态码: 200 ok    从浏览器下载的最新资源 200 (from memory cache)    不进行http请求,直接从浏览器内存中读取的资源,页面关闭,则资源释放,一般一些脚本、图片、文字等会存在内存中 200 (from disk cache) 

    2024年04月17日
    浏览(49)
  • 浏览器强缓存与协商缓存

    强制缓存的思想是,在浏览器内置数据库中缓存每次请求中 “可以被缓存” (受到一些的管控)的静态资源如 image, css, js 文件, 当第二次请求被缓存过的资源时候,会通过校验两个字段 Expires 和 Cache-Control 的max-age字段(注意,Expires 是 http1.0 的产物, Cache-Control 则是

    2023年04月19日
    浏览(40)
  • 火狐浏览器提示“无法加载您的Firefox配置文件”解决方法

    火狐浏览器提示“无法加载您的Firefox配置文件”解决方法分享。最近有用户在电脑开启火狐浏览器来使用的时候,软件出现了一个问题,提示无法加载Firefox配置文件。这样导致浏览器无法正常的使用了。那么如何去快速的处理这个问题呢?一起来看看以下的处理方法吧。 解

    2024年02月11日
    浏览(103)
  • 【vscode设置默认浏览器为google,配置默认浏览器没有google,VS Code 报Windows找不到文件‘chrome‘】

    VS Code 报Windows 找不到‘chrome’ 项目启动ctar+鼠标左键快捷打开并没有使用默认浏览器 并且自己去浏览器配置并提供完整的选项 网上有很多其他的答案不过对我都没有 最后解决是在google里配置 不是默认浏览器会有个按钮 点一下就跳转到系统配置默认浏览器中,选项就可以出

    2024年02月12日
    浏览(58)
  • 浏览器缓存机制

    什么是浏览器缓存 浏览器缓存就是浏览器根据 url 第一次访问网站之后,将网站的 html、css、js、图片等文件复制一份保留到浏览器中,当你二次访问这个 url 的网站时,如果网站没有明确表示有更新时,浏览器直接在缓存中查找内容,不会再次请求网页内容,只有网页明确表

    2024年02月04日
    浏览(52)
  • 浏览器缓存原理

    使用 HTTP 缓存的好处 :通过复用缓存资源,减少了客户端等待服务器响应的时间和网络流量,同时也能缓解服务器端的压力。可以显著的提升网站的应用性能。 HTTP 缓存策略分为两种 :强制缓存、协商缓存。 强制缓存 浏览器缓存没有过期的时候可以直接决定使用缓存。 强

    2023年04月27日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包