React Native Image组件请求已授权API图片资源时仍返回401错误

修复方案 #

1. 补全JWT认证头格式 #

Passport-JWT默认要求认证头遵循Authorization: Bearer <token>的标准格式，你当前的代码直接传入token，缺少Bearer 前缀，会被服务端直接判定为无效凭证。同时部分服务端的Header解析逻辑区分大小写，建议使用首字母大写的字段名。
修改Image组件的headers配置：

headers: { Authorization: `Bearer ${token}` }

2. 修复Image组件缓存导致的随机失效 #

React Native内置Image组件存在缓存复用逻辑，会优先使用之前未携带认证头的缓存请求，导致随机返回401。添加cache参数禁用缓存即可解决该问题：

source={{
  uri: config.apiURI + "/media/" + imageId,
  headers: { Authorization: `Bearer ${token}` },
  cache: 'no-store'
}}

如果调整后仍有兼容问题，可以替换为react-native-fast-image组件，该组件对自定义请求头的支持更稳定，不会出现随机丢头的问题。

3. 服务端放行OPTIONS预检请求 #

移动端发送带自定义头的请求前会先发送OPTIONS预检请求，该请求不会携带Authorization头，如果服务端未配置OPTIONS放行规则，会被Passport直接拦截返回401。在Express的认证中间件前添加如下逻辑即可：

app.use((req, res, next) => {
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

内容的提问来源于stack exchange，提问作者Matthew Kline