显示问题
gitee oss 上传的图片存在防盗链问题【即: 如何解决防盗链问题?】
-
图片效果:
-
解决方案
-
我最终解决方案
- nginx 301 跳转加上了 no-referrer,正常情况下用这个就可以了,只不过这种方案需要图片地址修改成经过 nginx 代理后的地址,如果还想要用原地址,则需要加上下面的方案
- 自行写了 js,获取到页面中的图片,添加 referrerPolicy="no-referrer",重新加载图片
const addNoReferrerPolicys = (noReferrerPolicyRegexps) => { // const noReferrerPolicyRegexps = [ // '^https?://gitee.com/.*/raw/.*/.*\.(jpg|jpeg|png|gif|webp)(\\?.*)?$' // ]; // 获取页面中所有图片元素 const imgEles = document.querySelectorAll('img'); if (!imgEles || !imgEles.length) return; // 遍历所有图片元素,添加 no-referrer 策略 imgEles.forEach(imgEle => { const src = imgEle.getAttribute('src'); if ( !src || !/^https?:\/\//.test(src) || (imgEle.complete && imgEle.naturalWidth && imgEle.naturalHeight) || imgEle.hasAttribute('referrerpolicy') ) { return; } for (const noReferrerPolicyRegexp of noReferrerPolicyRegexps) { if (new RegExp(noReferrerPolicyRegexp).test(src)) { // 匹配到 no-referrer 策略正则,则添加 referrerpolicy 属性 no-referrer console.log(`add no-referrer policy to img: ${src}`); imgEle.setAttribute('referrerpolicy', 'no-referrer'); let srcTmp = src.replace(/(\?|&)noreferrerVersion=(\d|\w)+/, ''); // 去除 noreferrerVersion=xxx srcTmp = `${srcTmp}${srcTmp.indexOf('?') > -1 ? '&' : '?'}noreferrerVersion=1`; console.log('addNoReferrerPolicys imgEle set srcTmp:', srcTmp); imgEle.src = srcTmp; break; } } }); }
- 在 head 里面添加了
<meta name="referrer" content="never">
,主要是解决一些插件加载图片问题,比如图片放大
-
-
使用后台的预下载(把图片下载下来放到服务器下)
缺点: 占用服务器的空间,访问速度没有豆瓣提供的稳点。有些网站是静态的如 hexo 就无法实现。
-
第三方代理
缺点: 不稳点,第三方代理可能在国内访问不稳定,在国内没有好的推荐。也可以自己做一个代理,之前有人用 GO 做过一个。 下面有一个,url 后面填上豆瓣 Api 返回的图片地址
<img src=”https://images.weserv.nl/?url=https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2544866651.jpg" \/>
-
nginx 301 重定向时加入 no-referrer【经过博主验证,这种方式最合适,重定向后的图片加上了 no-referrer 就能正常访问了】
#location /cdn_proxy/ { # # 配置代理 # proxy_pass https://gitee.com/; # # # 设置 HTTP 头,绕过防盗链 # proxy_set_header Referer ""; # proxy_set_header Host gitee.com; # # # 可选:设置其他代理头 # proxy_set_header User-Agent $http_user_agent; # proxy_set_header Accept-Encoding ""; # proxy_set_header X-Real-IP $remote_addr; # proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; #} location / { add_header Referrer-Policy "no-referrer"; rewrite ^(.*) https://gitee.com$1 permanent; }
-
还有一种比较友好和奢侈的,上传 CDN 调用 CDN 的地址,
缺点: 有点奢侈,因为所有图片都存到 CND 占用大量空间,CND 可能需要钱购买,CND 服务商提供图片上传的 API
-
Head 中设置 Referrer 为 never 【该方式影响很大,可能导致某些需要 referrer 的接口或者资源异常,请根据自身情况决定是否能够使用】
content 有四个值可以选择 never,always,origin,default 这是来自于 whatwg 标准,浏览器对他的支持还是很好的。MDN 标准,还多了一个 no-referrer 【我的博客 safari 上没好使,第一次非内存缓存时能正常加载,但网络中确实403了,然后使用缓存时却是使用了 403 后的图片,但是我写测试页面缓存却正常加载非403的图片,没弄明白】
<meta name="referrer" content="never">
-
添加 ReferrerPolicy 属性【和4一样,我的博客 safari 不好使】
添加 meta 标签相当于对文档中的所有链接都取消了 referrer, 而ReferrerPolicy 则更精确的指定了某一个资源的referrer策略。 关于这个策略的定义可以参照MDN。比如我想只对某一个图片取消referrer,如下编写即可:
<img src="xxxx.jpg" referrerPolicy="no-referrer" />
-
-
评论区