JWT认证导致静态资源403错误的排查与优化

1. 问题现象与初步排查

那天早上刚到公司，运维组的同事就急匆匆跑过来："老张，咱们新上线的管理系统出问题了！用户登录后头像和图片全都显示不出来，但其他功能都正常。"作为项目负责人，我立即打开浏览器开始复现问题。

典型症状表现为：

• 登录成功后，用户头像位置显示空白或破损图标
• 产品列表中的缩略图无法加载
• 所有通过<img>标签引用的静态资源均失效
• 控制台报错"Failed to load resource: the server responded with a status of 403 (Forbidden)"

首先我检查了最基础的几项：

1. 直接访问图片URL - 在浏览器地址栏输入图片完整路径，发现确实返回403错误
2. 检查文件权限 - 确认服务器上的图片文件权限设置为644，nginx用户有读取权限
3. 验证MIME类型 - 通过curl检查响应头，确认Content-Type正确（如image/jpeg）
4. 跨域问题排查 - 确认图片域名与主站同源，不存在CORS限制

关键发现：当退出登录状态后，直接访问图片URL反而能正常显示。这说明问题与用户认证状态强相关。

2. 认证机制深度分析

我们的管理系统采用JWT（JSON Web Token）认证方案，其工作流程如下：

mermaid复制sequenceDiagram
    participant Client
    participant Server
    Client->>Server: 提交用户名/密码
    Server->>Client: 返回access_token
    Client->>Server: 携带token请求图片资源
    Server-->>Client: 返回403错误

经过抓包分析，发现两个异常点：

1. 图片请求的HTTP头部确实携带了Authorization: Bearer
2. 服务器对静态资源请求也进行了JWT验证

问题根源在于Nginx配置。查看/etc/nginx/conf.d/static.conf发现：

nginx复制location /static/ {
    auth_request /auth;  # 对所有静态资源启用JWT验证