解決圖片訪問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網站後，做爲參數傳入，實現訪問