前端JavaScript解决防盗链(Referer Check)图片加载问题的常用方法
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">1.设置正确的Referer</a></li><li><a href="#_label1">2.使用代理服务器</a></li><li><a href="#_label2">3.使用no-referrer策略</a></li><li><a href="#_label3">4.将图片转换为 Base64</a></li><li><a href="#_label4">5.联系图片服务器管理员</a></li><li><a href="#_label5">6.使用第三方服务</a></li><li><a href="#_label6">总结</a></li></ul></div><p>防盗链（Referer Check）是服务器通过检查请求头中的 <code>Referer</code> 字段，来判断请求是否来自合法的来源。如果图片服务器启用了防盗链机制，而你的请求没有正确的 <code>Referer</code> 或者 <code>Referer</code> 不在允许的列表中，图片就无法加载。</p><p>以下是解决防盗链图片问题的几种方法：</p>
<p class="maodian"><a name="_label0"></a></p><h2>1.设置正确的Referer</h2>
<p>如果图片服务器允许某些特定的 <code>Referer</code>，你可以在请求中设置正确的 <code>Referer</code> 字段。</p>
<p><strong>方法</strong></p>
<p>使用 <code><meta></code> 标签设置全局 <code>Referer</code>：</p>
<div class="jb51code"><pre class="brush:xhtml;"><meta name="referrer" content="origin" />
</pre></div>
<p>或者：</p>
<div class="jb51code"><pre class="brush:xhtml;"><meta name="referrer" content="no-referrer-when-downgrade" />
</pre></div>
<p>在请求中动态设置 <code>Referer</code>：</p>
<p>如果你是通过 JavaScript 动态加载图片，可以使用 <code>fetch</code> 或 <code>XMLHttpRequest</code> 设置请求头：</p>
<div class="jb51code"><pre class="brush:js;">fetch(imageUrl, {
headers: {
Referer: "https://your-allowed-domain.com",
},
});
</pre></div>
<p class="maodian"><a name="_label1"></a></p><h2>2.使用代理服务器</h2>
<p>如果图片服务器对 <code>Referer</code> 的限制非常严格，你可以通过自己的服务器代理请求图片。</p>
<p><strong>方法：</strong></p>
<p>在你的服务器上设置一个代理接口，前端请求你的服务器，服务器再去请求图片并返回给前端。</p>
<p>示例（Node.js + Express）：</p>
<div class="jb51code"><pre class="brush:js;">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");
});
</pre></div>
<p>前端调用：</p>
<div class="jb51code"><pre class="brush:xhtml;"><img
:src="`/proxy-image?url=${scope.row.avatar}`"
style="width: 50px; height: 50px; border-radius: 50%"
/>
</pre></div>
<p class="maodian"><a name="_label2"></a></p><h2>3.使用no-referrer策略</h2>
<p>如果图片服务器允许无 <code>Referer</code> 的请求，可以通过设置 <code>referrerpolicy</code> 属性来禁用 <code>Referer</code>。</p>
<p><strong>方法：</strong></p>
<p>在 <code><img></code> 标签中添加 <code>referrerpolicy</code> 属性：</p>
<div class="jb51code"><pre class="brush:xhtml;"><img
:src="scope.row.avatar"
style="width: 50px; height: 50px; border-radius: 50%"
referrerpolicy="no-referrer"
/>
</pre></div>
<p>或者在 JavaScript 中动态设置：</p>
<div class="jb51code"><pre class="brush:js;">const img = new Image();
img.src = imageUrl;
img.referrerPolicy = "no-referrer";
</pre></div>
<p class="maodian"><a name="_label3"></a></p><h2>4.将图片转换为 Base64</h2>
<p>如果图片较小，可以将图片转换为 Base64 编码，直接嵌入到页面中，避免发送额外的请求。</p>
<p><strong>方法：</strong></p>
<p>使用工具或代码将图片转换为 Base64 字符串。</p>
<p>示例：</p>
<div class="jb51code"><pre class="brush:xhtml;"><img
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD..."
style="width: 50px; height: 50px; border-radius: 50%"
/>
</pre></div>
<p class="maodian"><a name="_label4"></a></p><h2>5.联系图片服务器管理员</h2>
<p>如果以上方法都无法解决问题，可以尝试联系图片服务器的管理员，申请将你的域名加入白名单。</p>
<p class="maodian"><a name="_label5"></a></p><h2>6.使用第三方服务</h2>
<p>一些第三方服务（如 Cloudflare、imgix 等）可以帮助处理防盗链问题。你可以将图片 URL 通过第三方服务代理，从而绕过防盗链限制。</p>
<p class="maodian"><a name="_label6"></a></p><h2>总结</h2>
<ul><li>如果图片服务器允许无 <code>Referer</code> 请求，优先使用 <code>referrerpolicy="no-referrer"</code>。</li><li>如果需要更高的灵活性，可以使用代理服务器。</li><li>如果图片较小，可以考虑转换为 Base64。</li><li>如果问题复杂，联系图片服务器管理员或使用第三方服务。</li></ul>
頁:
[1]