Web Analytics
MENU

网站图片出现的问题与解决

July 18, 2023 • Read: 934 • 捣鼓

本来我的网站是部署在境外的,所以每次网站有一点卡我都会很紧张。

昨天看到朋友写了一篇自己搭建Gravatar代理的文章,看完后也想要自己搞一下。但是按照他的方法部署后,出现了一部分头像无法显示(无限转圈圈),另一部分头像又可以显示的问题。



一开始我也没在意,以为是自己浏览器插件屏蔽或者是我网络波动导致,今天晚上看了下情况又严重了。我就用浏览器工具检查了下,发现有一部分头像出现了403错误提示。

大概情况像这样:

大片头像图片返回403错误

既然出现了403,那应该是代理的时候因为什么原因给拦截了。查了半天突然发现有的头像的URL不太对劲:

403错误详情

挑出一个看是这样的:



https://profile.bxaw.name/avatar/9c1f881af8a4c0e5d84528aae6271c7d?s=100&r=G&d=https://img.bxaw.name/NGravatar-200.jpg

参数中间,本应该是&的位置,变成了&,也就是说我的网站直接输出了&的转译字符&到URL中。图像评分的判断出现了问题。出问题的正是下面这段正则,不识别r参数前面出现&。


if ($args !~* "(^|&)r=(G)(&|$)") {
    add_header Cache-Control "no-store";
    return 403;
}

我暂时没有去检查为什么部分头像偶尔会输出&的问题,先尝试改判断规则。尝试了几种方案,最后暂时用下面这种:

set $r_value "";
    if ($args ~* "(^|&)r=([^&]+)(&|$)|(&)r=([^&]+)(&|$)") {
        set $r_value $2$5;
    }
    if ($r_value != "G") {
        add_header Cache-Control "no-store";
        return 403;
    }
    

首先定一个变量$r_value并清空,再从查询参数中提取r参数的值,并将其存储在变量$r_value中。

再用两种方式尝试匹配,其中(^|&)r=(G)(&|$)只匹配查询参数中是否包含r=G的字符串,用(&)r=([^&]+)(&|$)匹配形式为&r=XXX的字符串。

然后将第二个捕获组$2和第五个捕获组$5的值合并,将结果赋给变量$r_value
最后检查$r_value的值是否为G,如果不是,则添加头部Cache-Control "no-store"并返回状态码 403。

这样就能兼容r参数前面出现&导致无法匹配的问题。实际测试一下,匹配正常。

正常之后的状态

至于为什么会概率性输出&,还没弄清楚。

不过,为什么总觉得图片还是卡呢?不管了,能用就行。

除了这个之外,还做了两件事:

  • 顺手写了个404页面,并且实现了背景图片的随机显示。
  • 更新了首页的歌单。
Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment

6 Comments
  1. 才发现佬的评论系统很有趣
    X MoUths Ago

    1. @iEdon你更有趣#(傻笑)

  2. 小熊 小熊

    怎么感觉我的评论好像不见了@(小乖)

    1. @小熊昨天回滚了,丢了八天的数据。所以往前推八天的评论都无了。#(傻笑)

  3. 大佬们都是把站点部署在海外服务器哇。#(赞一个)

    1. @紫慕爱摸鱼噗,我只是一个家里蹲,不是大佬。
      放在海外是因为部署简单方便而且限制小。#(害羞)