|
防盗链（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。
- 如果问题复杂，联系图片服务器管理员或使用第三方服务。
|
发表于 2026-1-7 08:56:29