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

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

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



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

大概情况像这样：

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

挑出一个看是这样的：



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页面，并且实现了背景图片的随机显示。
• 更新了首页的歌单。

本文《网站图片出现的问题与解决》版权由白熊阿丸所有，任何人未经本人允许禁止转载。
如已授权转载，转载请备注文章来源链接：https://blog.bxaw.name/archives/profile-bug.html