关于 http 请求的缓存问题?(nginx 缓存、浏览器缓存)

关于 http 的缓存什么时候刷新,什么时候是用的本地的缓存数据,这个问题其实在开发的时候经常会遇见;有时候我们明明更新了代码,但是本地还是显示旧的文件或者数据;现在我们就来分析下这是为什么?

注意:http 请求有个约定:GET 有缓存,POST 一般没有缓存
RFC 规范中明确指出 POST 只有在特定头的情况下才会有缓存数据,一般不会缓存。

网页请求过程:


这里我们看到有 3 个地方会产生缓存:
1、本地浏览器缓存
2、CDN 缓存
3、Nginx 代理缓存

本地浏览器缓存

本地浏览器缓存涉及到以下几个项的控制:
1、URL 是否有更新,本地的浏览器缓存会基于 URL 这个 key 来进行查找,如果 URL 发生变化则不会从本地缓存中读取。
2、请求和响应中的 Cache-Control 头,Cache-Control 头一般用的比较多的两个值是:no-cache、max-age=[seconds],no-cache 表示不走缓存,永远都从服务器加载数据,max-age=[seconds] 表示缓存多久时间的数据。
3、Expires 头,也是表示缓存时间,等同 Cache-Control 的 max-age 效果。但是如果同时存在,则被 Cache-Control 的 max-age 覆盖。
4、请求中的 If-Modified-Since,响应中的 Last-Modified,这两个头信息用于判断文件是否发生修改,如果时间相同或者大于服务器时间,则该文件返回 304,表示内容没有发生变化不需要服务端传递数据回来,这其实也是一种变相的缓存(本地数据没有更新)。

CDN 缓存:

CDN 缓存主要受制于 CDN 的缓存时间配置和 URL 的变化。

Nginx 代理缓存:

Nginx 在做代理转发的时候为了减少网络开销,可以配置 proxy_cache 缓存代理。
一般默认情况下 Nginx 代理缓存是没有配置的,不过有些运维工具是自带有这个功能(宝塔),所以还是要了解一下。
Nginx 配置举例:

​
http {
    
    #设置缓存路径、大小和别名等
    proxy_cache_path /app/runtimes/openresty/nginx/proxy_cache_dir levels=1:2 keys_zone=cache_one:20m inactive=1d max_size=5g;
    
    server {

        #开启缓存,缓存基本设置
        proxy_buffering on;
        proxy_connect_timeout 60;
        proxy_read_timeout 60;
        proxy_send_timeout 60;
        proxy_buffer_size 32k;
        proxy_buffers 4 64k;
        proxy_busy_buffers_size 128k;
        proxy_temp_file_write_size 128k;
        proxy_next_upstream error timeout invalid_header http_500 http_503 http_404;

        #对特定的请求使用缓存
        location ~ .*\.(jpg|png|gif|css|js|html|ttf|svg)$ {
                proxy_cache cache_one;
                proxy_pass http://oa.zhihuikg.com;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header REMOTE-HOST $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
        
    }
}

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
回答: 当前端项目在跳转第三方外链时,可能会出现403 Forbidden报错。这种情况通常是因为请求头中携带了Referer信息,第三方网站认为这是非法访问导致的。为解决这个问题,我们可以在跳转时去掉请求头中的Referer信息。另外,还有可能出现跨域问题,具体表现为XMLHttpRequest报错提示No 'Access-Control-Allow-Origin' header is present on the requested resource。在这种情况下,可以考虑使用跨域解决方案,如在接口服务器中添加Access-Control-Allow-Origin头。另外,有时还可能出现502 Bad Gateway错误,这是因为服务器作为网关或代理时,访问下一个服务器时收到了非法的应答。解决方法可以尝试刷新网页或清理缓存文件,但也需要注意被访问网页是否被屏蔽。总之,在前端请求接口报错非法请求的情况下,需要注意Referer信息和跨域问题的处理。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [前端跳转链接报错403的原因以及解决方案](https://blog.csdn.net/Boale_H/article/details/120283883)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [前端常见报错原因详解](https://blog.csdn.net/weixin_44640323/article/details/114695347)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [前端报错。](https://blog.csdn.net/weixin_44730529/article/details/125279097)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值