防盜鏈（Referer Check）是服務(wù)器通過(guò)檢查請(qǐng)求頭中的 Referer 字段，來(lái)判斷請(qǐng)求是否來(lái)自合法的來(lái)源。如果圖片服務(wù)器啟用了防盜鏈機(jī)制，而你的請(qǐng)求沒(méi)有正確的 Referer 或者 Referer 不在允許的列表中，圖片就無(wú)法加載。

以下是解決防盜鏈圖片問(wèn)題的幾種方法：

1.設(shè)置正確的Referer

如果圖片服務(wù)器允許某些特定的 Referer，你可以在請(qǐng)求中設(shè)置正確的 Referer 字段。

方法

使用 <meta> 標(biāo)簽設(shè)置全局 Referer：

<meta name="referrer" content="origin" />

或者：

<meta name="referrer" content="no-referrer-when-downgrade" />

在請(qǐng)求中動(dòng)態(tài)設(shè)置 Referer：

如果你是通過(guò) JavaScript 動(dòng)態(tài)加載圖片，可以使用 fetch 或 XMLHttpRequest 設(shè)置請(qǐng)求頭：

fetch(imageUrl, {
  headers: {
    Referer: "https://your-allowed-domain.com",
  },
});

2.使用代理服務(wù)器

如果圖片服務(wù)器對(duì) Referer 的限制非常嚴(yán)格，你可以通過(guò)自己的服務(wù)器代理請(qǐng)求圖片。

方法：

在你的服務(wù)器上設(shè)置一個(gè)代理接口，前端請(qǐng)求你的服務(wù)器，服務(wù)器再去請(qǐng)求圖片并返回給前端。

示例（Node.js + Express）：

const express = require("express");
const axios = require("axios");
const app = express();

app.get("/proxy-image", async (req, res) => {
  const imageUrl = req.query.url;
  try {
    const response = await axios.get(imageUrl, {
      responseType: "arraybuffer",
      headers: {
        Referer: "https://your-allowed-domain.com",
      },
    });
    res.set("Content-Type", "image/jpeg");
    res.send(response.data);
  } catch (error) {
    res.status(500).send("Failed to load image");
  }
});

app.listen(3000, () => {
  console.log("Proxy server running on port 3000");
});

前端調(diào)用：

<img
  :src="`/proxy-image?url=${scope.row.avatar}`"
  style="width: 50px; height: 50px; border-radius: 50%"
/>

3.使用no-referrer策略

如果圖片服務(wù)器允許無(wú) Referer 的請(qǐng)求，可以通過(guò)設(shè)置 referrerpolicy 屬性來(lái)禁用 Referer。

方法：

在 <img> 標(biāo)簽中添加 referrerpolicy 屬性：

<img
  :src="scope.row.avatar"
  style="width: 50px; height: 50px; border-radius: 50%"
  referrerpolicy="no-referrer"
/>

或者在 JavaScript 中動(dòng)態(tài)設(shè)置：

const img = new Image();
img.src = imageUrl;
img.referrerPolicy = "no-referrer";

4.將圖片轉(zhuǎn)換為 Base64

如果圖片較小，可以將圖片轉(zhuǎn)換為 Base64 編碼，直接嵌入到頁(yè)面中，避免發(fā)送額外的請(qǐng)求。

方法：

使用工具或代碼將圖片轉(zhuǎn)換為 Base64 字符串。

示例：

<img
  src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD..."
  style="width: 50px; height: 50px; border-radius: 50%"
/>

5.聯(lián)系圖片服務(wù)器管理員

如果以上方法都無(wú)法解決問(wèn)題，可以嘗試聯(lián)系圖片服務(wù)器的管理員，申請(qǐng)將你的域名加入白名單。

6.使用第三方服務(wù)

一些第三方服務(wù)（如 Cloudflare、imgix 等）可以幫助處理防盜鏈問(wèn)題。你可以將圖片 URL 通過(guò)第三方服務(wù)代理，從而繞過(guò)防盜鏈限制。

總結(jié)

• 如果圖片服務(wù)器允許無(wú) Referer 請(qǐng)求，優(yōu)先使用 referrerpolicy="no-referrer"。
• 如果需要更高的靈活性，可以使用代理服務(wù)器。
• 如果圖片較小，可以考慮轉(zhuǎn)換為 Base64。
• 如果問(wèn)題復(fù)雜，聯(lián)系圖片服務(wù)器管理員或使用第三方服務(wù)。

到此這篇關(guān)于前端JavaScript解決防盜鏈(Referer Check)圖片加載問(wèn)題的常用方法的文章就介紹到這了,更多相關(guān)JavaScript防盜鏈內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論