场景
在浏览器中输入url可以正常访问，但是项目中无法访问，并返回403 Forbidden。一般是因为服务器设置了图片防盗链的原因。 这里我采用了yatessss前辈在vue完成知乎日报web版的解决方案，使用Images.weserv.nl进行缓存图片，并在需要使用图片url的地方进行相应的替换。
一、概念介绍
实现防盗链
要实现防盗链，我们就必须先理解盗链的实现原理，提到防盗链的实现原理就不得不从HTTP协议说起，在HTTP协议中，有一个表头字段叫referer，采用URL的格式来表示从哪儿链接到当前的网页或文件。换句话说，通过referer，网站可以检测目标网页访问的来源网页，如果是资源文件，则可以跟踪到显示它的网页地址。有了referer跟踪来源，就可以通过技术手段来进行处理，一旦检测到来源不是本站即进行阻止或者返回指定的页面。
突破防盗链
针对检查refer的方式，可以在页面中间件里面先进入目的地址的另外一个页面再转到目的页面即可，这样页面的refer就是目的站点自己的，如此，即做到突破。这方面可以使用的工具很多，尤其是成熟的web项目测试包，如HtmlUnit，直接在请求中设置refer都是可以的。我们这里没有直接操作refer，而是借助Images.weserv.nl图片缓存网站帮我们解决这个问题。
二、具体配置
<template>
<div class="indexSwipe">
<mt-swipe :auto="4000">
<mt-swipe-item v-for="item in swipeList">
<!-- 使用attachImageUrl方法转换url，解决防盗链问题 -->
<img :src="attachImageUrl(item.image)" alt="">
</mt-swipe-item>
</mt-swipe>
</div>
</template>
<script>
import {getSwipeListApi} from '@/api/index.js'
export default {
data() {
return {
// 轮播图数组
swipeList:[],
}
},
methods: {
// 图片防盗链问题解决
attachImageUrl(srcUrl) {
if (srcUrl !== undefined) {
return srcUrl.replace(/http\w{0,1}:\/\/p/g, 'https://images.weserv.nl/?url=p')
}
},
},
};
</script>
// 代码有部分删减，只保留了图片防盗链的部分
实现效果
