React应用调用Google授权服务器时出现302状态码CORS错误

问题原因 #

你用axios.get请求Google授权URL的方式是错误的。Google的OAuth授权服务器不支持AJAX跨域请求，浏览器的同源安全策略会拦截这类请求——因为Google没有在响应头中添加Access-Control-Allow-Origin: localhost:3000，所以触发CORS错误。而直接在浏览器地址栏打开该URL能正常跳转，是因为这属于浏览器顶级导航，不受AJAX跨域规则限制。

正确解决方案 #

1. 修改前端逻辑：直接跳转至授权URL

把前端中await axios.get(data.authorizationUrl)的AJAX请求替换成页面跳转，让浏览器直接导航到Google授权页面：

const List = () => {
    useEffect(() => {
        const fun = async () => {
            try {
                const { data } = await axios.get('/log')
                // 直接跳转至Google授权页面
                window.location.href = data.authorizationUrl;
            } catch (error) {
                console.log(error.message)
            }
        }

        fun()

   }, [])

    return (
        <div className='list-container'>
        </div>
    )
}

2. 完善后端回调路由

Google授权完成后会跳转到你配置的YOUR_REDIRECT_URL（建议设为后端的回调路由，比如http://localhost:4000/auth/callback），需要在后端新增该路由处理授权回调、获取访问令牌：

// 后端新增授权回调路由
app.get('/auth/callback', async (req, res) => {
    const { code } = req.query;
    try {
        // 用授权码换取access token
        const { tokens } = await oauth2Client.getToken(code);
        oauth2Client.setCredentials(tokens);
        
        // 调用YouTube API获取用户点赞视频
        const youtube = google.youtube({ version: 'v3', auth: oauth2Client });
        const likedVideosRes = await youtube.videos.list({
            part: 'snippet,contentDetails',
            myRating: 'like'
        });
        
        // 将结果返回给前端（可选择重定向到前端页面并携带数据）
        res.redirect(`http://localhost:3000/liked-videos?data=${encodeURIComponent(JSON.stringify(likedVideosRes.data))}`);
    } catch (error) {
        console.error('授权回调失败:', error);
        res.status(500).send('授权失败');
    }
});

3. 确认Google控制台配置

确保在Google开发者控制台的OAuth 2.0客户端ID设置中，重定向URI填写的是后端的回调路由（比如http://localhost:4000/auth/callback），而非前端地址。

额外说明 #

前端package.json中的proxy配置仅对请求后端API有效，无法作用于Google的外部服务器。OAuth授权的正确流程是：前端跳转至Google授权页 → 用户完成授权 → Google跳回后端回调路由 → 后端处理令牌并调用YouTube API → 后端将结果反馈给前端。

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