解决图片访问403 Forbidden问题

场景

在浏览器中输入url能够正常访问，可是项目中没法访问，并返回403 Forbidden。通常是由于服务器设置了图片防盗链的缘由。 这里我采用了yatessss前辈在vue完成知乎日报web版的解决方案，使用Images.weserv.nl进行缓存图片，并在须要使用图片url的地方进行相应的替换。

1、概念介绍

实现防盗链

要实现防盗链，咱们就必须先理解盗链的实现原理，提到防盗链的实现原理就不得不从HTTP协议提及，在HTTP协议中，有一个表头字段叫referer，采用URL的格式来表示从哪儿连接到当前的网页或文件。换句话说，经过referer，网站能够检测目标网页访问的来源网页，若是是资源文件，则能够跟踪到显示它的网页地址。有了referer跟踪来源，就能够经过技术手段来进行处理，一旦检测到来源不是本站即进行阻止或者返回指定的页面。

突破防盗链

针对检查refer的方式，能够在页面中间件里面先进入目的地址的另一个页面再转到目的页面便可，这样页面的refer就是目的站点本身的，如此，即作到突破。这方面可使用的工具不少，尤为是成熟的web项目测试包，如HtmlUnit，直接在请求中设置refer都是能够的。咱们这里没有直接操做refer，而是借助Images.weserv.nl图片缓存网站帮咱们解决这个问题。

2、具体配置

<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>
// 代码有部分删减，只保留了图片防盗链的部分
复制代码

实现效果

图片地址接在images.weserv.nl网站后，做为参数传入，实现访问