设置Referer限制后调用YouTube Data API v3遇403错误求助

问题根源 #

错误信息明确指出Requests from referer <empty> are blocked，说明前端请求未携带符合要求的Referer头，导致被Google API密钥的Referer限制拦截。

解决步骤 #

1. 验证请求的Referer头 #

打开浏览器开发者工具的Network面板，找到YouTube API的请求，查看请求头中的Referer字段：

• 如果字段为空：说明浏览器或部署环境未发送Referer，需排查配置。
• 如果字段值存在但不匹配允许的域名：检查域名是否与Google Cloud控制台的规则一致。

2. 修正API密钥的Referer规则 #

你的规则存在重复、格式不规范的问题，Google的Referer匹配要求严格的格式，建议保留以下规范条目，删除其他无效规则：

https://www.spacetiger.me/*
https://space-tiger-tarot-db.vercel.app/*
http://localhost:5173/*

• 必须包含完整协议（http:///https://）
• 用/*结尾匹配该域名下的所有路径
• 避免重复条目，防止匹配逻辑冲突

3. 显式设置fetch请求的Referer头 #

浏览器默认会发送Referer，但部分环境或配置可能会屏蔽，可在fetch中显式指定：

useEffect(() => {
    const fetchVideos = async () => {
        try {
            const response = await fetch(`https://www.googleapis.com/youtube/v3/search?key=${apiKey}&channelId=${channelId}&part=snippet,id&order=date&maxResults=3`, {
                headers: {
                    'Referer': `${window.location.origin}/`
                }
            });
            if (!response.ok) {
                throw new Error('Error al obtener los videos');
            }
            const data = await response.json();
            setVideos(data.items);
        } catch (error) {
            console.error('Error al obtener los videos:', error);
        }
    };
    fetchVideos();
}, [channelId]);

4. 排查Vite与Vercel配置 #

• 检查Vite的代理配置（vite.config.js中的server.proxy），确保没有移除或修改Referer头。
• Vercel部署时，检查项目的CSP（内容安全策略）设置，是否存在限制Referer发送的规则。

5. 临时排查：移除Referer限制 #

暂时将API密钥的Referer限制改为无限制，测试请求是否正常：

• 如果请求恢复正常：确认问题出在Referer规则配置，回到步骤2修正规则。
• 如果仍报错：排查API密钥是否仅授权YouTube Data API v3，或检查YouTube API的配额是否耗尽。

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