目 录CONTENT

文章目录

博客遇到的问题集以及解决方案

邱少羽梦
2024-05-20 / 0 评论 / 0 点赞 / 267 阅读 / 4254 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2024-05-23,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

显示问题

gitee oss 上传的图片存在防盗链问题【即: 如何解决防盗链问题?】

  • 图片效果: 20240520001002124-gyau.jpg

  • 解决方案

    • 我最终解决方案

      • 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" />

0
  1. 支付宝打赏

    qrcode alipay
  2. 微信打赏

    qrcode weixin
  3. QQ打赏

    qrcode qq

评论区