解決圖片訪問403 Forbidden問題

whiteballoon發表於2019-04-28
ORB

場景

在瀏覽器中輸入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>
// 程式碼有部分刪減，只保留了圖片防盜鏈的部分
複製程式碼

實現效果

解決圖片訪問403 Forbidden問題
圖片地址接在images.weserv.nl網站後，作為引數傳入，實現訪問

相關文章