Vue 3 项目通常以单页应用形式发布，静态资源体积大、接口调用频繁，如果直接暴露在公网，一旦遇到分布式拒绝服务攻击，源站带宽和计算资源会迅速耗尽。工程化防护的核心不是在前端拦截所有攻击流量，而是通过请求整形、资源优化和降级策略，减少攻击面对业务系统的冲击。

前端工程化在 DDoS 防护中的边界与价值

DDoS 攻击按层次可分为网络层洪水攻击和应用层请求攻击。网络层的 SYN Flood、UDP Flood 依赖防火墙和运营商清洗，前端代码无法触及；但应用层攻击如 HTTP Flood、慢速攻击、接口滥用，可以通过前端请求策略进行一定程度的缓解。Vue 3 工程化能做的是控制单个客户端在短时间内的请求频率、对重复请求去重、在服务异常时自动熔断，避免雪崩。

这里需要明确边界：任何客户端手段都无法阻止攻击者绕过浏览器直接调用 API。因此 Vue 3 中的限速与降级更多是提升正常用户体验、减少误伤，同时配合后端强校验才有效。如果把前端限速当作唯一防线，攻击者只需伪造请求头即可绕过。正确的做法是把它作为第一层过滤，后端仍要执行独立的速率限制和身份校验。

另外，前端工程化还能从资源加载路径上减少被滥用的可能。合理设置缓存头、使用内容分发网络、启用子资源完整性校验，都能让攻击流量在边缘节点被吸收，而不是全部回源。Vue CLI 和 Vite 的构建产物如果缺少指纹与长缓存策略，攻击者可能利用相同 URL 反复穿透缓存，造成回源压力。

Vue 3 中 axios 拦截器的请求限速与退避

在 Vue 3 项目里，axios 是常用的 HTTP 客户端。我们可以在拦截器中实现一个轻量的滑动窗口限速器，控制相同接口在单位时间内的最大调用次数。这样当组件被恶意脚本反复触发或用户操作异常时，前端可以主动丢弃一部分请求，并给出降级提示。

下面是一个基于时间戳队列的滑动窗口实现。它不依赖第三方库，适合直接放进项目的 utils 目录。每个请求会先检查当前窗口内的历史记录，超过限制则直接返回错误，并触发指数退避定时器，延迟后续请求的发送。

// requestGuard.js
const requestHistory = new Map();
export function createRateLimiter(limit = 30, windowMs = 10000) {
  return function checkLimit(key) {
    const now = Date.now();
    const queue = requestHistory.get(key) || [];
    while (queue.length && now - queue[0] > windowMs) {
      queue.shift();
    }
    if (queue.length >= limit) {
      return { allowed: false, retryAfter: windowMs - (now - queue[0]) };
    }
    queue.push(now);
    requestHistory.set(key, queue);
    return { allowed: true, retryAfter: 0 };
  };
}
export function backoff(attempt) {
  return Math.min(30000, 1000 * 2 ** attempt) + Math.random() * 500;
}

axios 拦截器里配合这个限速器，对同一 URL 的并发与重复请求做去重。比如用户快速点击提交按钮，只有第一个请求会真正发送，后续请求直接复用同一个 Promise，避免请求洪峰。攻击者如果试图通过前端页面高频触发接口，会被客户端限速拦截一部分。

import axios from 'axios';
import { createRateLimiter, backoff } from './requestGuard';
const checkLimit = createRateLimiter(20, 10000);
const pendingRequests = new Map();
const instance = axios.create({ timeout: 10000 });
instance.interceptors.request.use((config) => {
  const key = `${config.method}:${config.url}`;
  const check = checkLimit(key);
  if (!check.allowed) {
    return Promise.reject(new Error(`请求过于频繁，请 ${Math.ceil(check.retryAfter / 1000)} 秒后重试`));
  }
  if (config.method === 'get' && pendingRequests.has(key)) {
    return Promise.reject({ cancelled: true, shared: pendingRequests.get(key) });
  }
  config.headers['X-Request-Time'] = Date.now();
  return config;
}, error => Promise.reject(error));
instance.interceptors.response.use(null, (error) => {
  if (error.response && error.response.status === 429) {
    const attempt = Number(error.config.headers['x-retry-attempt'] || 1);
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(instance(error.config)), backoff(attempt));
    });
  }
  return Promise.reject(error);
});

请求头中的 X-Request-Time 可以用于后端计算请求时延，识别慢速攻击。需要注意的是，这些信息只能作为辅助信号，后端必须独立校验时间戳范围，避免攻击者伪造。

静态资源指纹、CDN 缓存与内容安全策略

Vue 3 的构建工具 Vite 或 Vue CLI 默认会为静态资源生成内容哈希文件名，例如 assets/index-8f3a2b.js。这类指纹文件只要内容不变，URL 就不会变化，配合 CDN 的长期缓存，能够把大部分静态请求终结在边缘节点，源站只需要处理首次回源。攻击者即使发起大量静态资源请求，也主要消耗 CDN 带宽，源站压力很小。

为了最大化缓存效果，可以在部署配置中为带指纹的资源设置一年以上的 Cache-Control，而为 index.html 设置 no-cache 或短缓存。这样既能保证前端更新及时生效，又能减少回源次数。以 Nginx 为例，可以这样配置：

location /assets/ {
    add_header Cache-Control "public, max-age=31536000, immutable";
    try_files $uri =404;
}
location = /index.html {
    add_header Cache-Control "no-cache";
}

内容安全策略（CSP）虽然不直接防御 DDoS，但能减少页面被注入恶意脚本后成为攻击跳板的可能。通过限制脚本来源和连接目标，攻击者无法在受害者浏览器中加载外部挖矿或攻击脚本。Vue 3 单页应用通常使用严格 CSP，需要避免内联脚本，Vite 生产构建也支持移除内联样式与脚本哈希。

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://cdn.ipipp.com; connect-src 'self' https://api.ipipp.com; img-src 'self' data:;">

此外，子资源完整性（SRI）可以为引用的第三方脚本添加 integrity 属性。如果 CDN 被劫持或资源被篡改，浏览器会拒绝执行，避免页面被利用来发起恶意请求。Vue 3 项目在生产环境应尽量将第三方库打包进构建产物，而不是依赖不可控的外部 CDN。

与 WAF、后端限流协同的多级防线

前端请求整形只能挡住一部分低强度攻击和不正常操作，真正的大流量 DDoS 需要在边缘层清洗。将 Vue 3 站点部署在 Cloudflare、阿里云 CDN 或 AWS CloudFront 之后，可以让边缘节点识别异常流量模式，执行人机验证和封禁。Vue 3 应用本身不需要做太多改动，但要保证 API 请求都走同源或受控域名，方便边缘规则统一处理。

后端仍然要实施独立的分布式限流，例如基于 Redis 的令牌桶或漏桶算法。前端的 X-Request-Time 和请求签名可以作为辅助识别，但不能作为信任来源。比较稳妥的做法是后端结合 IP、账号、设备指纹和验证码进行多因子判断，对可疑流量返回 429 或 503，并要求客户端执行指数退避。

一个完整的工程化防护链路大致如下：浏览器端 Vue 3 限速器先过滤误操作和脚本高频调用；CDN 边缘节点吸收静态资源请求；WAF 规则拦截明显恶意特征；后端网关再按业务维度限流和熔断；监控系统记录请求来源和 QPS，动态调整阈值。任何一层单独使用都有短板，只有联动起来才能在不影响正常用户的前提下提升系统韧性。