调用Google Places photo接口未返回图片仅返回HTML链接如何解决

Google Places Photo 接口本身不会直接在响应体返回图片二进制内容，接口设计逻辑是：收到合法请求后返回302重定向响应，响应头的Location字段才是真实的图片访问地址。你拿到HTML页面内容，一般是两个原因：

• 请求没有正确处理302重定向逻辑，拿到了中间跳转页/错误提示页
• API Key权限不足、photo_reference过期，被重定向到了错误提示HTML页面

根据你的实际需求二选一调整代码即可：

• 只需要可直接访问的图片直链：配置axios不自动跟随重定向，直接从302响应头提取Location字段
• 需要拿到图片二进制内容（用于本地存储、转base64等场景）：配置axios响应类型为二进制格式，让其自动跟随重定向获取最终图片数据

修正后的代码实现：

async function getFoto(foto){
    const api_key = "mykey"
    const requestUrl = `https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photo_reference=${foto}&key=${api_key}`
    try {
        // ---------- 方案1：获取真实图片直链 ----------
        const redirectResponse = await axios.get(requestUrl, {
            maxRedirects: 0, // 禁止自动跟随重定向
            validateStatus: status => status === 302 // 将302状态码视为正常响应
        })
        const realImageUrl = redirectResponse.headers.location
        console.log("真实图片直链：", realImageUrl)
        return realImageUrl

        // ---------- 方案2：直接获取图片二进制内容 （需要用就把上面的代码注释，放开下面这段） ----------
        // const imageResponse = await axios.get(requestUrl, {
        //     responseType: 'arraybuffer' // 大文件场景可替换为stream
        // })
        // return imageResponse.data // 返回值为图片二进制Buffer
    }catch(error) {
        console.log(error)
        return Promise.reject(error)
    }
}

• 如果是前端场景直接把图片显示到页面，不需要发起axios请求，直接把拼接好的photo接口地址放到<img>标签的src属性上即可，浏览器会自动处理302重定向加载图片
• 提前确认API Key已经开通Places API权限，且没有做IP/域名限制导致鉴权失败
• photo_reference存在有效期，过期后请求会失败，需要重新调用Place详情接口获取新的有效值

内容的提问来源于stack exchange，提问作者Matteo Della Ragione