应使用 Nginx 的 limit_req 限制单个 IP 对 .js、.css、index.html 等高风险静态资源的访问频率，配置 burst 和 nodelay 参数控制突发流量，并配合合理缓存策略提升防护效果。
用 Nginx 托管 React 项目时，直接暴露 index.html 和静态资源（如 .js、.css）可能被恶意高频请求刷取，造成带宽浪费或 CDN 成本激增。虽然 React 是前端应用，不处理业务逻辑，但资源本身仍有被滥用风险。合理使用 limit_req 可以有效限制单个 IP 对关键静态资源的访问频率，兼顾可用性与防护。
明确要限流的资源类型
不是所有静态文件都需要限流。应聚焦高频、体积大、易被工具批量抓取的资源，例如：
-
.js和.css文件（尤其是打包后的大 chunk） -
index.html（防止反复刷新触发重定向或 SSR 模拟行为） - 图标、字体等虽小但常被扫描的资源（可选）
避免对图片（.png、.jpg）或用户上传内容限流，以免影响正常展示；也无需限制 /api/ 路径——那是后端该管的事。
在 location 块中按扩展名启用 limit_req
在 Nginx 配置中，针对静态资源路径使用正则匹配，并绑定限流区域。例如：
立即学习“前端免费学习笔记（深入）”；
limit_req_zone $binary_remote_addr zone=static:10m rate=5r/s;
<p>server {
listen 80;
root /var/www/my-react-app;
index index.html;</p><pre class="brush:php;toolbar:false;"># 对 js/css/html 限流
location ~ \.(js|css|html)$ {
limit_req zone=static burst=10 nodelay;
try_files $uri $uri/ /index.html;
}
# 其他静态资源（图片、字体等）不限流
location ~ \.(png|jpg|jpeg|gif|ico|woff2?|ttf|eot)$ {
try_files $uri =404;
}
# SPA 路由回退
location / {
try_files $uri $uri/ /index.html;
}}
说明：
- zone=static:10m rate=5r/s 表示每秒最多 5 个请求，突发允许最多 10 个（超出部分立即拒绝）；
- nodelay 避免排队等待，让超限请求快速失败，减少连接占用；
- try_files 保持 React Router 的 History 模式正常工作。
注意缓存头与限流的协同
浏览器和 CDN 缓存能大幅降低重复请求，是限流的有力补充。确保静态资源返回合理缓存策略：
- 给
.js、.css加上Cache-Control: public, max-age=31536000（一年），利用文件哈希名实现自动失效 -
index.html应设为Cache-Control: no-cache或短时效（如max-age=300），避免用户卡在旧版本
若资源已被强缓存，Nginx 甚至收不到请求，限流自然不生效——所以先配好缓存，再叠加限流，效果更稳。
验证与调优建议
上线前用简单脚本测试是否生效：
# 10 次并发请求同一 js 文件
for i in {1..10}; do curl -s -o /dev/null -w "%{http_code}\n" http://yoursite.com/static/js/main.abc123.js & done观察返回码：正常应多数是 200，超限后出现 503。若全 200，检查 location 是否匹配、limit_req 是否拼写正确、配置是否重载（nginx -s reload）。
初始建议从宽松开始（如 10r/s），再根据实际日志（log_format 中加入 $limit 变量）分析真实访问分布，逐步收紧。特别注意内网、CDN 回源 IP 可能集中，必要时改用 $http_x_forwarded_for（需可信代理链）。
