【网络系列】防盗链（Referer Check）

博客目录

• • • [1. **设置正确的 `Referer`**](#1. 设置正确的 Referer)
    • • 方法：
    • [2. **使用代理服务器**](#2. 使用代理服务器)
    • • 方法：
    • [3. **使用 `no-referrer` 策略**](#3. 使用 no-referrer 策略)
    • • 方法：
    • [4. **将图片转换为 Base64**](#4. 将图片转换为 Base64)
    • • 方法：
    • [5. **联系图片服务器管理员**](#5. 联系图片服务器管理员)
    • [6. **使用第三方服务**](#6. 使用第三方服务)
    • 总结

防盗链（Referer Check）是服务器通过检查请求头中的 Referer 字段，来判断请求是否来自合法的来源。如果图片服务器启用了防盗链机制，而你的请求没有正确的 Referer 或者 Referer 不在允许的列表中，图片就无法加载。

以下是解决防盗链图片问题的几种方法：

---

1. 设置正确的 Referer

如果图片服务器允许某些特定的 Referer，你可以在请求中设置正确的 Referer 字段。

方法：

• 使用 <meta> 标签设置全局 Referer：

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

  或者：

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

• 在请求中动态设置 Referer：

  如果你是通过 JavaScript 动态加载图片，可以使用 fetch 或 XMLHttpRequest 设置请求头：

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

---

2. 使用代理服务器

如果图片服务器对 Referer 的限制非常严格，你可以通过自己的服务器代理请求图片。

方法：

• 在你的服务器上设置一个代理接口，前端请求你的服务器，服务器再去请求图片并返回给前端。

• 示例（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");
  });

• 前端调用：

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

---

3. 使用 no-referrer 策略

如果图片服务器允许无 Referer 的请求，可以通过设置 referrerpolicy 属性来禁用 Referer。

方法：

• 在 <img> 标签中添加 referrerpolicy 属性：

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

• 或者在 JavaScript 中动态设置：

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

---

4. 将图片转换为 Base64

如果图片较小，可以将图片转换为 Base64 编码，直接嵌入到页面中，避免发送额外的请求。

方法：

• 使用工具或代码将图片转换为 Base64 字符串。

• 示例：

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

---

5. 联系图片服务器管理员

如果以上方法都无法解决问题，可以尝试联系图片服务器的管理员，申请将你的域名加入白名单。

---

6. 使用第三方服务

一些第三方服务（如 Cloudflare、imgix 等）可以帮助处理防盗链问题。你可以将图片 URL 通过第三方服务代理，从而绕过防盗链限制。

---

总结

• 如果图片服务器允许无 Referer 请求，优先使用 referrerpolicy="no-referrer"。
• 如果需要更高的灵活性，可以使用代理服务器。
• 如果图片较小，可以考虑转换为 Base64。
• 如果问题复杂，联系图片服务器管理员或使用第三方服务。

觉得有用的话点个赞 👍🏻 呗。

❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍

🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙