当前位置：首页 > news >正文

Nginx + Vue/React 前端 + API：防止路径混淆漏洞与跨域问题实战分享

news 2025/8/22 9:55:05

项目采用 SPA 前端 + 后端 API，Nginx 统一作为 HTTPS 主入口和反向代理。

1️⃣ 背景

2️⃣ 问题分析

原理：

风险：

3️⃣ 实战经验（解决方案）

① 统一 API 前缀

② Nginx 配置优化

③ 预检请求（OPTIONS）与跨域

④ 安全加固

4️⃣ 总结

1️⃣ 背景

系统架构示意图

浏览器│▼
HTTPS 18** (这里是你的nginx配置端口) ├─ /api/ → 后端 API (localhost:7500)└─ /     → SPA 前端页面 (/home/***/dist/index.html)

在实际项目中，系统存在如下特点：

前端 SPA（Vue/React）部署在 Nginx 下
后端服务（ZLMediaKit、Spring Boot、Node.js 等）提供 REST API
API 路径有 /api/... 前缀，但前端路由可能有 /index/api/...
端口是 HTTPS 入口，同时作为 web 主入口

问题：

浏览器发起跨域请求时，部分路径被前端兜底 HTML 页面“吃掉”，导致 CORS 错误或安全风险。

2️⃣ 问题分析

原理：

Nginx 匹配 location 的优先级：
1. = 精确匹配
2. ^~ 前缀匹配
3. 普通前缀 /
4. 正则 ~
Vue/React SPA 的前端路由常用 location / 兜底返回 index.html
导致 /index/api/... 路径落到前端，而不是代理到后端 → 返回 HTML

请求 /index/api/getSnap → Nginx / (兜底) → 返回 HTML ❌
请求 /api/getSnap       → Nginx /api/       → 返回 JSON ✅

风险：

路径混淆漏洞：攻击者可访问 API 变种路径
绕过鉴权或限流
前端错误暴露（返回 HTML 而非 JSON）

3️⃣ 实战经验（解决方案）

① 统一 API 前缀

所有后端接口统一挂在 /api/ 下
禁止 /index/api 或其他变种

② Nginx 配置优化

API 路径强制代理到后端：

location ^~ /api/ {proxy_pass http://localhost:7500;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

前端兜底只兜非 API 路径：

location / {root /home/***/***t; 这里你的前端路径index index.html;try_files $uri /index.html;
}

③ 预检请求（OPTIONS）与跨域

API 跨域由后端处理，避免 Nginx 自己返回 204 造成 header 丢失
统一允许自定义 header：

if ($request_method = OPTIONS) {add_header 'Access-Control-Allow-Origin' 'https://***.***.com' always; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With, app-key, app-secret' always;add_header 'Access-Control-Max-Age' 3600;return 204;
}