nginx为大屏可视化配置反向代理需分三部分：静态资源用location /dashboard/ + alias指向dist目录并配合try_files；api接口用location /api/ + proxy_pass（末尾带/）转发至后端；websocket用location /ws/ + proxy_http_version 1.1及upgrade头支持。
在 Nginx 中为大屏数据可视化项目配置反向代理，核心是通过 location 块精准匹配前端资源路径和后端 API 接口，避免跨域、路径错乱或静态资源 404。关键不在于“全量代理”，而在于按需区分：静态文件走本地，API 请求转发到后端服务，WebSocket（如图表实时推送）也要显式支持。
匹配大屏前端静态资源（HTML/JS/CSS）
假设大屏前端打包后部署在 /opt/dashboard/dist，访问路径为 /dashboard/：
location /dashboard/ {
alias /opt/dashboard/dist/;
try_files $uri $uri/ /dashboard/index.html;
}
注意：
• alias 末尾必须带 /，且路径要与 location 路径对齐；
• try_files 确保 Vue/React 路由（如 /dashboard/chart）能回退到 index.html，由前端路由接管；
• 不要用 root 替代 alias，否则路径拼接会多一层 /dashboard，导致 404。
代理 API 接口（带前缀隔离）
大屏常调用后端接口，如 /api/v1/data，应统一加前缀避免与前端路径冲突，并转发到内部服务：
location /api/ {
proxy_pass http://127.0.0.1:8081/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
说明：
• proxy_pass 末尾的 / 很关键：它会剥离 /api/ 前缀再转发，后端收到的是 /v1/data；
• 若省略末尾 /（写成 http://127.0.0.1:8081），则完整路径 /api/v1/data 会被转发，后端需适配该路径；
• 所有 proxy_set_header 是为了透传真实客户端信息，便于后端日志和鉴权。
支持 WebSocket 实时图表（如 ECharts + Socket.IO）
若大屏使用 WebSocket 推送实时数据（如 /ws/ 或 /socket.io/），需显式启用升级协议：
location /ws/ {
proxy_pass http://127.0.0.1:9001/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
}
要点：
• 必须设置 proxy_http_version 1.1；
• Upgrade 和 Connection 头用于协商 WebSocket 升级；
• 同样注意 proxy_pass 末尾斜杠，确保路径正确剥离。
常见避坑提示
- 避免
location /通配覆盖：它会优先匹配所有请求，导致/api/或/dashboard/规则失效，除非用^~或=显式提高优先级 - 大小写敏感：Nginx 默认区分大小写，若大屏资源含大写路径（如
/Chart.js），确保文件系统和配置一致；可加underscores_in_headers on;支持下划线 header（部分后端 SDK 需要） - 缓存控制：大屏 JS/CSS 建议禁用强缓存，加
add_header Cache-Control "no-cache, must-revalidate";防止更新不生效 - HTTPS 下的混合内容：确保所有
proxy_pass目标也走 HTTPS，或在后端响应头中设Content-Security-Policy: upgrade-insecure-requests
