记 Nginx 反代出现网站显示错位(文件加载不全)问题解决过程

小助手读文章 00:00 / 00:00

温馨提示:
本文所述内容具有依赖性,可能因软硬条件不同而与预期有所差异,故请以实际为准,仅供参考。

本站大部分站点都使用了自建 CDN,详见《说说本站自建 CDN 完整解决方案》、《利用 Nginx 反向代理和缓存功能自建及优化 CDN 加速节点详细教程》、《如何加快网站访问速度 - 关于 CDN》。

最开始只有主站博客上了自建 CDN,使用上面的配置并无出现什么问题,但是后来把 ArmxMod for Typecho 演示站也加进来后发现,主站和演示站介绍页经常出现页面显示错位异常。

一开始发现显示错位时,查看文件加载情况,发现两个主要文件 main.jsmain.css 都与服务器不一致,清除缓存后刷新显示正常了,关掉页面再打开发现显示又错位了!

搜索网页大多是说缓存大小不够,导致 Nginx 在接收服务器数据时没有完整接收就反馈给了客户端,是客户端显示不正常,主要是下面三个参数设置:

proxy_buffer_size 128k;
proxy_buffers 4 256k;
proxy_busy_buffers_size 512k;

因此尝试将 proxy_buffers 调大:

proxy_buffer_size 128k;
proxy_buffers 128 256k;
proxy_busy_buffers_size 512k;

清除缓存重启服务,测试发现问题依然存在,多次调整参数也没有解决这个问题。

在多次清理缓存过程中意外发现,主站和演示站介绍页的 main.jsmain.css 两个文件,除了域名不一样,相对路径是一样的,查看反代配置中缓存 Key 是:

proxy_cache_key $uri$is_args$args;

这表示在 Nginx 反代服务器中,是以访问路径+参数为关键字来缓存文件的,这就造成虽然两个站域名不一样,但是缓存的 Key 是一样的,也就是说两个站的 main.jsmain.css,在实际应用中,使用了同一个 Key

在测试中,也发现了主站加载了没有引用的字体文件,这个字体文件实际上是演示站引用的,再次印证两个站的缓存 Key 冲突了,也就是说我们设置的 proxy_cache_key 是不够合理的!

调整配置如下:

proxy_cache_key $host$uri$is_args$args;

表示将域名+访问路径+参数作为缓存 Key,这样一来就可以解决不同域名使用相同的相对路径文件缓存问题,也就是这次遇到的页面经常加载异常的问题。

如果配置了手动清除缓存,那么缓存清除路径应该是:

......
proxy_cache cache;
......
location ~ /purge(/.*)
 {
  ......
  proxy_cache_purge cache $host$1$is_args$args;
  ......
 }

ArmxMod for Typecho
个性化、自适应、功能强大的响应式主题

推广

 继续浏览关于 反代nginx教程网站建站 的文章

 本文最后更新于 2020/03/31 10:48:57,可能因经年累月而与现状有所差异

 引用转载请注明: VirCloud's Blog > 经验 > 记 Nginx 反代出现网站显示错位(文件加载不全)问题解决过程