MEAN栈应用Ubuntu服务器Nginx部署后图片加载404问题

1. 服务器文件路径验证 #

本地与服务器的项目目录结构可能存在差异，导致控制器生成的文件路径错误：

• 查看Node.js日志中Constructed file path的输出内容，确认生成的物理路径是否正确
• 登录服务器，执行ls [生成的文件路径]命令，检查目标图片是否真实存在
• 若路径错误，调整path.join的层级：先通过console.log(__dirname)输出当前控制器所在目录，再修正".."的数量以匹配服务器上userUploads的实际位置

2. Nginx路由匹配优先级问题 #

Nginx的正则location匹配优先级高于前缀location，当前配置中location ~* \.(js|css|png|jpg...)$会优先拦截图片请求，而该规则指向Angular的静态资源目录，无法找到上传的图片。

解决方案：
调整Nginx配置，将API上传路径的匹配规则放在静态文件规则之前，或修改静态文件规则排除API路径：

# 优先匹配API上传路径，避免被静态文件规则拦截
location /api/users/uploads/ {
    proxy_pass http://localhost:2300/api/users/uploads/;
    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;
}

# 修改静态文件规则，排除/api路径下的请求
location ~* ^/(?!api/)\.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
    expires max;
    log_not_found off;
}

修改后执行sudo nginx -s reload生效。

3. 文件权限问题 #

Ubuntu服务器上，Node.js进程的运行用户（如www-data）可能没有读取userUploads目录的权限：

• 查看目录权限：ls -l /path/to/userUploads
• 设置正确的权限：

# 赋予目录读权限
chmod -R 755 /path/to/userUploads
# 将目录归属改为Node进程用户（假设为www-data）
chown -R www-data:www-data /path/to/userUploads

4. 路由参数冗余问题 #

当前路由定义/uploads/:role/:userId/:filename中，:role和:userId参数未被控制器使用（控制器从JWT中获取这两个值），若URL中的参数与JWT内容不一致，会导致文件路径错误。

优化方案：
简化路由与Angular请求逻辑，去掉冗余参数：

// 修改Node.js路由
router.get("/uploads/:filename", authenticate, getUploadByFilename);

// 修改Angular服务的请求URL
`${this.apiUrl}/uploads/${filename}`

5. 验证请求转发有效性 #

绕过Nginx直接测试Node.js服务，确定问题来源：

• 在服务器上执行curl命令测试：

curl -H "Authorization: Bearer YOUR_JWT_TOKEN" http://localhost:2300/api/users/uploads/school/668a8a781b0520a147957c64/profilePicture-1720355513994-766311342.jpg

• 若返回404：问题在Node.js端，检查文件路径与权限
• 若返回图片：问题在Nginx配置，重新调整路由匹配规则

内容的提问来源于stack exchange，提问作者Jatinder Singh