微信网页开发分享图片在对象存储上开启防盗链不显示图片问题

微信网页开发，图片放对象存储服务的存储桶里，分享后链接不显示图标。

有人说是因为微信服务器没有设置对象存储的安全js域名，实测并非此原因。

有人说是对象存储上有跨域限制，这个情况可能会存在，要结合自己的情况来配置跨域访问限制。

有人说这个分享图片必须是300pxX300px以内，大小不超过32KB的图片，实测也不是这个原因。具体对图片分辨率和文件大小的限制似乎不止这么小，没有那么苛刻，但是大图会导致分享后图标加载变慢是真的，所以这个分享图标依然建议能小就小吧。我是偷懒，js控制的把页面上获取到的第一张jpg图片作为分享链接的图标通过微信网页的js-api发过去的。

服务器带宽成本比较高，为了提高访问体验，因此使用了对象存储服务。

但是对象存储服务不可能不限制访问来源，尤其是空Referer的请求肯定是不能允许的（这个我就放开一夜，存储桶里的文件就被网上的各种蜘蛛爬了600多MB的流量，我桶里基本是图片和视频）。

一开始在研究微信公众平台的服务器Referer，但时后来发现，微信端的请求，全都不带Referer。

然后有人说，把微信的服务器IP，全都加入到对象存储的白名单里。这个可行性其实不然。你得通过微信的API接口先去获取微信服务器的IP地址列表，而且这个列表里的IP可能会发生变动，你要经常去获取这个列表。然后获取到IP地址列表之后，你还得想办法自动化地把它同步到你的对象存储服务管理系统的白名单里。有的对象存储服务的IP白名单可能是无法通过API来进行维护的，还有的对象存储服务，你加入白名单之后，就变成了只有白名单中的IP才能访问。

于是，想到了反向代理，Nginx的反向代理性能强悍，其实我还可以用php来写程序控制，但是性能方面，没有Nginx来得划算。于是就捣鼓Nginx，但是踩了个巨坑，耽误了不少时间。

网上大部分的资料都是天下文章一大抄，没有人做过真正的验证。或者就是很粗制滥造的能打通IP地址转发就结束了。

今天爬坑结束，写个笔记，给有需要的人，也给自己留个记录。

Nginx配置：

server {
        listen        80;
        server_name  你当前的网站域名;
        root   "你的网站根目录";

        # 反向代理
        location ^~/res/ {
            # access_log /www/wwwlogs/res_access.log;
            # error_log /www/wwwlogs/res_error.log debug;
            # 去除 /res/ 前缀
            rewrite ^/res/(.*)$ /$1 break;
            # 设置反向代理的目标地址
            proxy_pass http://www.baidu.com/;

            # 设置 Referer 请求头，满足对象存储的白名单规则
            proxy_set_header Referer http://你的网站域名;

            # 传递其他必要的请求头
            # proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header from "";

        }
        
}

网上的代码，会有一行：proxy_set_header Host $host;，这会导致，你的域名被直接带到被代理的服务器上。然后你就会得到各种404。因为服务器上不会存在你这个域名下对应的二级目录“res”的。

需要注意的是：proxy_pass http://www.baidu.com/;这一行，目标服务器域名结尾要带“/”，因为等一会儿我们要把“你的域名/res/api/arg1/agr2......”后面的所有参数转发过去。

rewrite ^/res/(.*)$ /$1 break;这一句会替换掉访问url中的“/res/”部分。

访问"你的域名/res/arg1/arg2/arg3"等同于访问“http://www.baidu.com/arg1/arg2/arg3”

这种方案只适用于http链接的代理。对于https的访问，目前我暂时还有使用需求和场景，暂时没去研究。