在React Native中使用Axios调用Google Places API获取图片报错

问题核心原因 #

浏览器能正常访问的API链接，用Axios请求却报错，主要是两个问题导致：URL格式存在无效空格、Axios默认解析逻辑不匹配响应数据类型。

具体解决步骤 #

1. 清理URL中的多余空格 #

你代码里的模板字符串换行缩进，会让生成的URL开头带空格——浏览器会自动忽略这类空格，但Axios会严格按照拼接后的字符串发送请求，直接导致地址无效。

修正方式：把URL写成一行，或者去掉模板字符串里的换行和缩进：

const getPlacePhoto = async (photoReference: string) => {
  // 确保URL无多余空格，格式完全正确
  const requestUrl = `https://places.googleapis.com/v1/${photoReference}/media?maxHeightPx=400&maxWidthPx=400&skipHttpRedirect=true&key=${EXPO_PUBLIC_GOOGLE_PLACES_API_KEY}`;

  try {
    // 后续逻辑...
  } catch (error) {
    console.error("Error fetching data:", error);
  }
};

2. 配置Axios响应类型适配图片数据 #

Google Places的/media接口返回的是图片二进制数据（如JPG/PNG），但Axios默认会尝试把响应解析为JSON，这直接触发语法错误。需要显式设置responseType为'blob'或'arraybuffer'：

完整修正代码：

const getPlacePhoto = async (photoReference: string) => {
  const requestUrl = `https://places.googleapis.com/v1/${photoReference}/media?maxHeightPx=400&maxWidthPx=400&skipHttpRedirect=true&key=${EXPO_PUBLIC_GOOGLE_PLACES_API_KEY}`;

  try {
    // 指定响应类型为blob，适配图片二进制数据
    const response = await axios.get(requestUrl, {
      responseType: 'blob'
    });
    // 如需在RN中展示图片，可将blob转为可直接使用的URI
    const imageUri = URL.createObjectURL(response.data);
    return imageUri;
  } catch (error) {
    console.error("Error fetching data:", error);
  }
};

3. 验证API密钥配置 #

确认EXPO_PUBLIC_GOOGLE_PLACES_API_KEY环境变量配置无误：

• 检查.env文件中变量前缀EXPO_PUBLIC_正确（Expo仅暴露带该前缀的环境变量）
• 重启Expo开发服务器，确保环境变量生效
• 登录Google Cloud控制台，确认该密钥已启用Places API，且未设置限制RN应用访问的IP/应用规则

平台额外检查 #

• iOS：确认Info.plist未限制该域名的网络请求
• Android：检查AndroidManifest.xml中已添加网络权限，且无域名访问限制

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