Nginx反向代理其他站点，Referer防盗链导致图片403错误

问题

由于需要在我们的小程序中链接其他外部的网站做内容显示来满足我们的需求，但微信小程序中web-view加载网页，需要在微信公众号平台中设置业务域名，并且业务域名需要做服务器校验，这就会导致我们无法直接的使用外部的网站（如：www.baidu.com）

 

解决方案

使用 Nginx 做反向代理，配置如下：

location /路径 {
        proxy_pass 代理网站;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_redirect off;
}

但在使用上述配置后，又出现了其他的问题，由于代理网站图片资源做了Referer防盗链，这就导致网站加载出来后，图片报403错误，导致无法正常加载

鉴于上述问题，分析原因，通过反向代理访问后，页面内容已经输出至浏览器，图片等资源则直接是请求的代理网站服务器，代理网站服务器做了Referer防盗链，如果Referer为空或者是代理网站域名则通过授权，否则就出现上诉问题 403 错误

那怎么解决了?

通过上诉分析，我们知道，通过反向代理访问，页面内容响应之前，我们改变内容再输出，比如说替换代理服务器网站为我们自己的域名，并通过我们自己的域名再次做反向代理，或者页面资源请求时不携带Referer

在这里，因为可以通过不携带Referer来简便处理，所以怎么设置不携带Referer呢?

这时我们就会使用到HTTP请求中的referrer和Referrer-Policy，以及怎么设置 referrer，至于referrer和Referrer-Policy请看另外的一篇文章

现在我们可以通过 meta 标签来设置 referrer，配置如下：

<meta name="referrer" content="no-referrer">

那么是不是只要在页面输出前，将上述的配置，动态添加至页面内就能解决Referer防盗链问题了，下面我们将整个反向代理配置修改如下：

location /路径 {
        proxy_pass 代理网站;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_redirect off;

        sub_filter '</title>' '</title><meta name="referrer" content="no-referrer">';
        sub_filter_once on;
        sub_filter_types *;
}

我们通过替换掉 </title> 结束标签，并把我们需要设置的内容一并添加进去，现在我们重启Nginx服务器，重新访问时，防盗链问题已经解决了

 

总结

由于比较少配置 nginx，以及遇到这个问题的时候，也是通过百度来查找了很多资料，最后解决时发现还是很简单，同时也是对反向代理有了一点点了解，把这个写出来也希望能帮助到其他的同学