使用Google Identity API调用Drive API时浏览器CORS错误求助

算力阿峰

2026-7-18

问题描述

发起Google Drive API请求时遭遇CORS错误：

Access to fetch at 'https://googleapis.com/drive/v3/files?key=[API_KEY]&access_token=[ACCESS_TOKEN]' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

已通过Google Identity API完成授权，请求函数如下：

async function loadFiles(accessToken: string) {
    try {
        const result = await fetch(
            `https://googleapis.com/drive/v3/files?key=${encodeURIComponent(data.apiToken)}&access_token=${encodeURIComponent(accessToken as string)}`,
                // `https://googleapis.com/drive/v3/files?key=${encodeURIComponent(data.apiToken)}`,
            {
                headers: {
                    Authorization: 'Bearer ' + accessToken,
                    Accept: 'application/json'
                    // 'Access-Control-Allow-Origin': 'http://localhost:5173'
                },
                method: 'GET'
            }
        );
        console.dir(result);
    } catch (error) {
        console.dir(error);
    }
}

已完成的操作：

在Google控制台添加http://localhost:5173作为授权JavaScript来源
查阅官方文档但其中CORS相关链接失效
检查过浏览器请求详情

疑问：是否必须通过服务器中转请求？能否直接从客户端实现？

解决建议

修正API请求域名：将请求地址中的https://googleapis.com改为https://www.googleapis.com。Google的API端点必须包含www前缀，未带前缀的域名未配置对应的CORS允许规则，这是导致预检失败的核心原因之一。
移除URL中的access_token参数：已通过Authorization: Bearer {token}头传递身份凭证，无需在URL中重复携带access_token参数，重复传递可能触发额外的安全校验逻辑，干扰CORS正常流程。
确认OAuth客户端配置：确保使用的是Web应用类型的OAuth 2.0客户端ID，而非桌面/移动客户端ID。检查JavaScript来源的配置是否完全匹配：协议（http/https）、域名、端口号必须与当前前端环境完全一致，无拼写错误。
验证授权范围：确认授权流程中请求了Drive API的有效范围（如https://www.googleapis.com/auth/drive.readonly），无正确范围的令牌会导致权限错误，部分情况下会间接影响CORS响应头的返回。
不要手动设置Access-Control-Allow-Origin头：该响应头由服务器端配置，客户端请求中添加此头无效，无需保留相关代码。
检查令牌有效性：使用Google的令牌校验工具确认当前access_token有效，且包含正确的目标API范围和允许的来源。

关于客户端直接请求的可行性：完全可以直接从客户端发起请求，无需服务器中转。只要上述配置修正完成，符合Google的OAuth 2.0 Web应用规范，就能正常绕过CORS限制。

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