如何在VSCode中配置Node环境以实现网页防盗链保护测试-VSCode-PHP中文网

vscode 本身不提供防盗链功能，防盗链逻辑必须由 node.js 服务端实现；vscode 仅用于编写、运行和调试代码，关键前提是正确配置 node/npm 环境、国内 npm 镜像，并用 express 编写 referer 校验中间件，配合 launch.json 调试真实请求头。

如何在vscode中配置node环境以实现网页防盗链保护测试

VSCode 本身不提供防盗链功能，它只是编辑和调试环境；真正的防盗链逻辑必须由 Node.js 服务端代码实现，而 VSCode 的作用是让你能快速写、运行、调试这段代码。配置重点不在“装插件”，而在确保 node 可执行、npm 镜像可用、调试配置指向当前文件。

确认 node 和 npm 已正确安装并可调用

这是整个流程的前提——VSCode 不会帮你装 Node，它只调用系统已有的 node 命令。

打开 VSCode 内置终端（Ctrl+`），输入 node -v 和 npm -v，必须有输出版本号；若报“command not found”，说明系统 PATH 没包含 Node 安装路径，需手动添加到环境变量
检查 npm config get registry，建议设为国内镜像（如 https://registry.npmmirror.com），避免后续安装 Express 等依赖超时
不要依赖“Code Runner”插件跑防盗链逻辑——它不支持调试断点、无法读取 req.headers.referer 等关键字段，仅适合简单 console.log

用 Express 快速搭建带防盗链逻辑的本地服务

直接手写原生 http 模块也能做，但 Express 提供更清晰的中间件抽象，方便你聚焦 Referer 判断逻辑。

VSCode 1.118

微软正式发布 Visual Studio Code 1.118 版本。本次更新重点强化了 AI 开发体验与企业管理能力，其中最引人注目的是新增 Copilot CLI 远程控制功能，允许开发者通过手机或网页远程监控和接管 AI 会话。同时，为了提高 AI 的运行性价比，新版本优化了令牌缓存策略以降低成本。此外，1.118 版还引入了 Chronicle 本地历史追踪、TypeScript 7.0 支持以及更严格的企业级访问管控。

下载

在项目根目录执行：npm init -y && npm install express
新建 server.js，写入基础防盗链中间件：

const express = require('express');
const app = express();

// 允许的来源域名（注意：不含协议和端口）
const ALLOWED_HOSTS = ['localhost', '127.0.0.1', 'www.myapp.com'];

function antiHotlink(req, res, next) {
  const referer = req.get('referer');
  if (!referer) return res.status(403).send('Direct access denied');

  const refererHost = new URL(referer).hostname;
  if (!ALLOWED_HOSTS.includes(refererHost)) {
    return res.status(403).send('Hotlinking forbidden');
  }
  next();
}

app.use('/images/', antiHotlink); // 仅对 /images/ 下资源启用
app.use('/images/', express.static('public/images'));

app.listen(3000, () => console.log('Server running on http://localhost:3000'));

把测试图片放进 public/images/test.jpg，确保目录结构匹配 express.static 路径
此时访问 http://localhost:3000/images/test.jpg 是 OK 的；但用另一个 HTML 文件（比如 test.html）里写 <img src="http://localhost:3000/images/test.jpg?x-oss-process=image/resize,p_40"> 并用浏览器直接打开该 HTML，Referer 就会是 file:// 或空，触发 403

VSCode 中正确配置 launch.json 以支持调试

关键不是“选 Node.js 环境”，而是让调试器能捕获真实 HTTP 请求头，包括 referer——这要求你通过浏览器访问，而非直接 node server.js 运行。

按 Ctrl+Shift+D 打开调试面板 → 点“创建 launch.json” → 选 “Node.js” → 选 “Launch Program”
修改生成的配置，重点改两项：
– "program" 设为 "${workspaceFolder}/server.js"（不要写死路径）
– 加上 "env": { "NODE_ENV": "development" }，便于后续加日志
在 antiHotlink 函数第一行打个断点，F5 启动，再用 Chrome 访问 http://localhost:3000/images/test.jpg，就能停住并查看 req.headers.referer 实际值
如果断点不触发，请检查：是否保存了 server.js？是否终端没报错就退出？是否浏览器地址栏输的是 http:// 开头而不是 file://？