静态资源加载异常的本质是浏览器请求路径与nginx实际响应或转发路径不一致，根源在于代理链中路径语义被隐式改写而前端未感知；解决关键是让请求精准落到nginx直服或后端转发的正确位置，需区分动静态请求、统一trailing slash、透传x-forwarded头、关闭误触发的range处理。
静态资源加载异常，本质是浏览器请求路径与 Nginx 实际能响应或转发的路径不一致。不是配置写错了，而是路径语义在代理链中被隐式改写，而前端代码没感知。解决关键在于：让资源请求落到正确的位置——要么由 Nginx 直接服务，要么准确转发给后端，且路径不变形。
区分动静请求，让 Nginx 直接托管静态文件
最稳定的做法是把 JS、CSS、图片等明确交给 Nginx 处理，不走后端代理。这样避免路径转发、端口错乱、Range 请求冲突等问题。
- 确认静态资源物理存放位置，比如
/var/www/myapp/dist/ - 在 server 块中添加精准匹配规则，优先于通用 proxy_pass：
location ~* \.(js|css|png|jpg|gif|woff2|svg|ico)$ { root /var/www/myapp/dist; expires 1y; add_header Cache-Control "public, immutable"; } - 注意：
root是拼接路径，alias是替换路径；若 location 为/static/，用alias更直观
若必须由后端提供静态资源，确保 proxy_pass 路径严格对齐
常见错误是 proxy_pass http://backend/ 和 location /app/ 搭配，导致请求 /app/style.css 被转发成 http://backend//app/style.css（多出前缀）或 http://backend/style.css（截断丢失）。
- 保持 trailing slash 一致性：location 末尾有
/，proxy_pass 末尾也必须有/ - 例如，要将
/cms/xxx.js完整转发到后端的/cms/xxx.js：location /cms/ { proxy_pass http://backend-server/cms/; } - 切忌写成
proxy_pass http://backend-server;（无尾斜杠），这会触发路径重写逻辑，极易出错
修复因代理导致的端口/协议错乱问题
浏览器访问的是 https://example.com:9000，但页面里写的 /static/main.js 被解析为 http://example.com:80/static/main.js ——这是后端生成 HTML 时未适配代理头造成的。
- 在 Nginx 中透传关键头信息：
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_set_header X-Forwarded-Port $server_port;
- 后端应用（如 Spring Boot、Node.js）需启用「forward headers」支持，并用这些头构造正确的资源 URL
- 前端也可用
<base href="/>%20%E6%88%96%E8%BF%90%E8%A1%8C%E6%97%B6%E6%8B%BC%E6%8E%A5%20window.location.origin%20%E6%8E%A7%E5%88%B6%E5%9F%BA%E7%A1%80%E8%B7%AF%E5%BE%84
%E5%A4%84%E7%90%86%20Range%20%E8%AF%B7%E6%B1%82%E5%AF%BC%E8%87%B4%E7%9A%84%20JS/CSS%20%E5%8A%A0%E8%BD%BD%E4%B8%8D%E5%85%A8
%E9%83%A8%E5%88%86%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6%E6%88%96%E6%9E%84%E5%BB%BA%E4%BA%A7%E7%89%A9%EF%BC%88%E5%A6%82%20Webpack%20%E8%BE%93%E5%87%BA%E7%9A%84%E5%A4%A7%20JS%20%E6%96%87%E4%BB%B6%EF%BC%89%E4%BC%9A%E8%A2%AB%E6%B5%8F%E8%A7%88%E5%99%A8%E5%88%86%E7%89%87%E8%AF%B7%E6%B1%82%E3%80%82Nginx%20%E9%BB%98%E8%AE%A4%E5%B0%9D%E8%AF%95%E5%A4%84%E7%90%86%20Range%EF%BC%8C%E4%BD%86%E8%8B%A5%E5%90%8E%E7%AB%AF%E4%B8%8D%E6%94%AF%E6%8C%81%E6%88%96%E4%BB%A3%E7%90%86%E9%93%BE%E4%B8%8D%E4%B8%80%E8%87%B4%EF%BC%8C%E5%B0%B1%E4%BC%9A%E8%BF%94%E5%9B%9E%20206%20%E7%8A%B6%E6%80%81%E4%BD%86%E5%86%85%E5%AE%B9%E4%B8%BA%E7%A9%BA%E6%88%96%E6%88%AA%E6%96%AD%E3%80%82
- %E5%9C%A8%E5%AF%B9%E5%BA%94%20location%20%E4%B8%AD%E5%85%B3%E9%97%AD%20Nginx%20%E7%9A%84%20Range%20%E8%87%AA%E5%8A%A8%E5%A4%84%E7%90%86%EF%BC%9A%0A%20%20%20%20
- %E8%AF%A5%E9%85%8D%E7%BD%AE%E8%AE%A9%20Range%20%E8%AF%B7%E6%B1%82%E5%8E%9F%E6%A0%B7%E9%80%8F%E4%BC%A0%E7%BB%99%E5%90%8E%E7%AB%AF%EF%BC%8C%E7%94%B1%E5%90%8E%E7%AB%AF%E5%86%B3%E5%AE%9A%E6%98%AF%E5%90%A6%E6%94%AF%E6%8C%81%E5%8F%8A%E5%A6%82%E4%BD%95%E5%93%8D%E5%BA%94
- %E7%89%B9%E5%88%AB%E9%80%82%E7%94%A8%E4%BA%8E%20Ray%20Dashboard%E3%80%81MinIO%20Console%E3%80%81Vue%20CLI%20dev-server%20%E7%AD%89%E5%9C%BA%E6%99%AF
