Nginx静态资源代理配置终极指南：解决CSS/JS文件404错误

一、问题重现：静态资源404的经典场景

 # 访问日志中的典型错误
 2025/06/26 11:30:45 [error] 668#668: *215 open() 
 "/www/wwwroot/project/static/css/main.css" 
 failed (2: No such file or directory)

浏览器表现：

页面样式丢失（CSS文件404）

功能交互失效（JS文件404）

图片显示为裂图（Image文件404）

二、终极解决方案：Nginx静态代理配置


 # 此配置放于 server 块内，位置很重要！
 # ------------------------------
 # 静态资源路径配置（核心！）
 # ------------------------------
 
 # 1. 静态文件代理（CSS/JS/图标等）
 location /static/ {
     # 实际文件路径（结尾必须有/）
     alias /www/wwwroot/your_project/static/;
     
     # 缓存策略（建议设置）
     expires 30d;
     add_header Cache-Control "public, immutable";
     
     # 性能优化
     access_log off;
     log_not_found off;
 }
 
 # 2. 媒体文件代理（用户上传内容）
 location /media/ {
     alias /www/wwwroot/your_project/media/;
     expires 30d;
 }
 
 # 3. 字体文件特殊处理（避免跨域问题）
 location ~ /static/.*\.(eot|ttf|woff|woff2)$ {
     add_header Access-Control-Allow-Origin *;
 }
 
 # ------------------------------
 # 动态请求代理配置（必须在静态配置之后！）
 # ------------------------------
 location / {
     proxy_pass http://localhost:8000; # 后端服务端口
     
     # 必要请求头设置
     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_connect_timeout 75s;
     proxy_read_timeout 300s;
 }

配置要点说明：
路径匹配规则：location /static/ 中的 /static/ 对应URL访问路径
alias目录：必须以/结尾，如 /path/to/static/
顺序强制要求：静态代理配置必须在动态代理(location /)之前
字体文件：需要额外处理跨域，否则可能加载失败

<上一篇