React Native加载带Token与TTL的认证图片失败求助

你遇到的这个问题其实挺常见的——React Native里加载带URL参数认证的图片时，很容易在请求格式或者数据处理上踩坑。我给你整理几个靠谱的解决思路：

1. 直接给Image传递完整的带参URL #

首先要纠正一个误区：你之前把token、ttl这些参数放在请求头里，但实际上这个图片的认证信息是URL查询参数，不是请求头字段。直接把完整的带参数URL传给Image的source就可以了，这是最简单直接的方式：

<Image 
  style={{width: 300, height: 300}} 
  resizeMode="contain" 
  source={{ 
    uri: "https://mangatown.secure.footprint.net/store/manga/8921/cover.jpg?token=83a7fa7598faf5b7aae40e3c935e0cd95a019adc&ttl=1521921600&v=1521696105" 
  }} 
/>

你之前的fetch请求失败，很大原因是用res.text()去处理图片的二进制数据，这会直接损坏图片内容，完全没必要绕这一步。

2. 若需转Base64（比如本地缓存需求） #

如果你因为本地缓存或者其他特殊原因，必须通过fetch获取后转成Base64，那得修正你的fetch代码，正确处理二进制数据：

fetch("https://mangatown.secure.footprint.net/store/manga/8921/cover.jpg?token=83a7fa7598faf5b7aae40e3c935e0cd95a019adc&ttl=1521921600&v=1521696105")
  .then(res => res.blob())
  .then(blob => {
    const reader = new FileReader();
    reader.onloadend = () => {
      this.setState({ base64: reader.result });
    };
    reader.readAsDataURL(blob);
  })
  .catch(err => console.error('图片加载失败:', err))

之后在Image组件里使用这个Base64字符串：

<Image 
  style={{width: 300, height: 300}} 
  resizeMode="contain" 
  source={{ uri: this.state.base64 }} 
/>

注意：如果你的React Native版本比较老，原生fetch对Blob的支持可能有问题，这时候可以试试rn-fetch-blob这类第三方库来处理二进制请求。

3. 处理CORS跨域限制 #

如果直接用完整URL还是加载失败，大概率是目标服务器的CORS策略限制了RN的请求。这种情况下可以试试两个方案：

• 联系服务器管理员，确认是否允许RN的请求源（RN的请求源比较特殊，有时候需要服务器放宽跨域限制）
• 搭建一个后端代理服务：让你的RN app请求自己的后端接口，再由后端去请求目标图片URL，最后把图片数据返回给RN——这是解决跨域问题最稳妥的通用方案

额外小提示 #

• 先检查一下URL里的ttl参数（过期时间），看看是不是已经过期了，这也是常见的加载失败原因
• React Native的Image组件本身会自动处理图片缓存，除非有特殊需求，没必要自己手动转Base64缓存

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