Google Drive thumbnailLink在localhost环境返回403的解决方法

我成功从Google Drive获取到thumbnailLink，用于在同一React应用中展示缩略图。生产服务器运行时或直接在浏览器粘贴链接都能正常显示，但localhost本地环境访问时返回403错误。

典型的缩略图链接示例：
https://lh4.googleusercontent.com/p4OAiOaP0dBaE4JF…1vTCqNEUVdTH9CoCDAeAZB4D38cIvYpktGekW0IuBpRI=s220

以下是我的React代码：

import React, { useState, useEffect } from 'react'

export const App = () => {
    const [ googleAuth, setGoogleAuth ] = useState({})
    const [ thumbnailLink, setThumbnailLink ] = useState([])
    
    const SCOPES = 'https://www.googleapis.com/auth/drive.metadata.readonly https://www.googleapis.com/auth/drive.file'
    
    const params = {
        apiKey: 'XXXXXXXXXXXX',
        client_id: 'XXXXXXXXXXXX.apps.googleusercontent.com',
        discoveryDocs: ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"],
        scope: SCOPES
    }
    
    useEffect(() => {
        window.gapi && window.gapi.load('client:auth2', () => {
            window.gapi.client.init(params)
                .then(onInit)
        })
    }, [])

    const onInit = () => {
        setGoogleAuth(window.gapi.auth2.getAuthInstance())
    }

    const signIn = () => {
        googleAuth.signIn()
            .then(response => console.log('Success: ', response))
            .catch(err => console.log("Error: ", err))
    }

    const getThumbnail = () => {
        gapi.client.drive.files.get({
                fileId: '1VFjfZlquVVUkHSmISKjH57UC0OaIQzVo',
                fields: 'thumbnailLink'
        })
        .then((response) => {
            setThumbnailLink(response.result.thumbnailLink)
        })
        .catch((err) => console.log(err))
    }

    return (
        <>
            <button onClick={signIn}>Sign In</button>
            <button onClick={getThumbnail}>getThumbnail</button>
            {thumbnailLink && <img src={thumbnailLink} />} {/* localhost下返回403 */}
        </>
    )
}

解决办法 #

1. 为localhost添加OAuth授权来源 #

Google OAuth 2.0会限制请求的合法来源，localhost可能未被加入授权列表：

• 打开Google Cloud控制台，找到你的项目
• 进入「API和服务」→「凭据」页面
• 找到对应的OAuth 2.0客户端ID并点击编辑
• 在「已授权的JavaScript来源」中添加http://localhost:3000（根据你的本地开发端口调整）
• 保存设置，等待几分钟让配置生效

2. 为缩略图链接附加授权令牌 #

本地环境下，缩略图链接需要携带用户的授权令牌才能正常访问，修改getThumbnail方法：

const getThumbnail = () => {
    gapi.client.drive.files.get({
            fileId: '1VFjfZlquVVUkHSmISKjH57UC0OaIQzVo',
            fields: 'thumbnailLink'
    })
    .then((response) => {
        // 获取当前用户的授权令牌
        const token = gapi.auth.getToken().access_token;
        // 为缩略图链接追加令牌参数
        const authorizedLink = `${response.result.thumbnailLink}&access_token=${token}`;
        setThumbnailLink(authorizedLink);
    })
    .catch((err) => console.log(err))
}

通过携带授权令牌，本地请求会被Google服务识别为合法请求，避免403错误。

3. 检查本地开发服务器CORS配置（可选） #

如果使用自定义本地服务器而非create-react-app默认服务，需要确保服务器允许向lh4.googleusercontent.com发送跨域请求，避免请求被拦截。

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