如何解决微信公众号文章图片屏蔽下载的问题？（有服务器和域名）

从零开始，把一篇“无法右键、无法长按保存”的微信公众号文章，变成可一键批量下载高清原图的在线工具，一共走五步。

第一步：需求拆解

        微信文章里的动图/静图被两层枷锁困住：

所以目标是：

        拿到图片原始 URL

        绕过防盗链

        提供可批量下载的页面（电脑右键/手机长按均有效）

第二步：准备一台最便宜的云服务器

        系统ubantu（宝塔面板一键装）

        只跑反向代理

        一个域名

        装完宝塔后，软件商店→安装 PM2 管理器（顺带装好 Node）

第三步：写 20 行 Node，解决「防盗链 + 跨域」

        路径：/www/wwwroot/你站点目录/index.js

const express = require('express');
const axios = require('axios');
const app = express();
app.use(require('cors')());

// 1. 代理文章正文，解决跨域
app.get('/', async (req, res) => {
if (!req.query.url) return res.status(400).send('need ?url=');
try {
const r = await axios.get(req.query.url, {
headers: { 'User-Agent': 'Mozilla/5.0' },
responseType: 'stream'
});
r.data.pipe(res);
} catch { res.status(502).send('fetch fail'); }
});

// 2. 代理图片，绕过防盗链
app.get('/img', async (req, res) => {
if (!req.query.url) return res.status(400).send('need ?url=');
try {
const r = await axios.get(req.query.url, {
headers: {
'User-Agent': 'Mozilla/5.0',
Referer: 'https://mp.weixin.qq.com'
},
responseType: 'stream'
});
res.set('Content-Type', r.headers['content-type']);
r.data.pipe(res);
} catch { res.status(502).send('img fail'); }
});

app.listen(4000, () => console.log('proxy on 4000'));

在目录下打开终端，启动并守护进程：

cd /www/wwwroot/imgproxy
npm init -y && npm i express cors axios
pm2 start index.js –name imgproxy
pm2 save
pm2 startup

第四步：Nginx 把流量一分为二

        宝塔 → 站点 → 配置文件，在整站反代 之前 先写 /img 专用路由，避免整站代理把它吃掉：

# 1. 图片专用路由 → 本地 Node
location ^~ /img/ {
proxy_pass http://127.0.0.1:4000/img/;
proxy_set_header Host $host;
add_header Access-Control-Allow-Origin *;
if ($request_method = OPTIONS) { return 204; }
}

# 2. 整站路由 → 微信（用于抓正文）
location ^~ / {
proxy_pass https://mp.weixin.qq.com;
proxy_set_header Host mp.weixin.qq.com;
add_header Access-Control-Allow-Origin *;
if ($request_method = OPTIONS) { return 204; }
}

但大佬们或许就发现了，这样做反代，规则会把所有请求包括静态网页都打到微信，访问的话肯定返回502，所以要在整站代理前面加一句“静态文件逃逸”：

# 1. 先让静态文件走本地磁盘
location ^~ /pic/ {
root /www/wwwroot/目录; # 这里填写你的目录，目录层级要对
try_files $uri $uri/ =404;
}

# 2. 图片专用路由 → 本地 Node
location ^~ /img/ {
proxy_pass http://127.0.0.1:4000/img/;
proxy_set_header Host $host;
add_header Access-Control-Allow-Origin *;
if ($request_method = OPTIONS) { return 204; }
}

# 3. 整站路由 → 微信（用于抓正文）
location ^~ / {
proxy_pass https://mp.weixin.qq.com;
proxy_set_header Host mp.weixin.qq.com;
add_header Access-Control-Allow-Origin *;
if ($request_method = OPTIONS) { return 204; }
}

保存后重载nginx

第五步：做一个高颜值页面（吹牛逼呢）

       纯静态即可

       下载按钮：直接指向 /img?url=… 并加 download 属性，电脑右键、手机长按都能保存原图 核心 JS 片段：

const PROXY_HTML = 'http://你的域名/s/';
const PROXY_IMG = 'http://你的域名/img?url=';

const res = await fetch(PROXY_HTML + articlePath);
const html = await res.text();
const imgs = […new DOMParser().parseFromString(html,'text/html')
.querySelectorAll('img')]
.map(i => i.dataset.src || i.src);

imgs.forEach(src => {
const card = document.createElement('div');
card.className = 'card';
card.innerHTML = `
<img src="${PROXY_IMG + encodeURIComponent(src)}">
<a class="dl" href="${PROXY_IMG + encodeURIComponent(src)}" download>下载原图</a>
`;
document.getElementById('list').appendChild(card);
});

踩坑备忘

        404 基本都是 Nginx 没把 /img 单独指回 4000

        502 基本都是 Node 没起或端口错，先 pm2 restart

        微信偶尔弹滑块，浏览器里手动过一次即可，后台 Node 不受影响

        图片后缀 .gif 可能是假 GIF（实际是 mp4），Content-Type 透传即可，前端无需特殊处理。

成品效果

打开http://lt.nmgshirun.com/pic/

→ 粘贴文章URL → 可下载

手机端可长按保存

至此，从“无法保存”到“一键高清”，全部打通。