使用Google Classroom API时遭遇404错误及跨域Access-Control-Allow-Origin头问题求助

嘿，我看了你遇到的问题，结合你的代码和描述，发现几个关键的点可以帮你解决这个问题，咱们一步步来：

1. 先解决导致404的核心问题：错误的API端点 #

你当前调用的https://www.googleapis.com/classroom/v1/courses/about这个端点是不存在的！Google Classroom API里没有这个路径，这才是你收到404错误的直接原因。

根据你要获取用户相关资源的需求，你应该用正确的端点：

• 如果要获取当前授权用户的信息：/classroom/v1/userProfiles/me
• 如果要获取用户的课程列表：/classroom/v1/courses

举个例子，修改你的请求URL为正确的用户信息端点：

xhr.open('GET', 'https://www.googleapis.com/classroom/v1/userProfiles/me', true);

2. 删掉错误的请求头设置 #

你代码里的xhr.setRequestHeader('Access-Control-Allow-Origin', 'http://localhost:50656');完全是多余且错误的！这个头是服务器端返回给客户端的响应头，用来告知浏览器允许哪个源的请求，你在客户端请求里设置它不仅没用，还会触发浏览器的OPTIONS预检请求，如果Google的API服务器不允许这个自定义头，预检就会失败，直接导致请求被拦截。

赶紧把这行代码删掉！

3. 改用更安全的Token传递方式 #

你现在把access_token放在URL参数里，这种方式存在安全风险（可能被缓存、记录在日志里），Google的API推荐用Authorization: Bearer {token}的请求头来传递token，修改代码如下：

// 打开请求时不要在URL里带token
xhr.open('GET', 'https://www.googleapis.com/classroom/v1/userProfiles/me', true);
// 添加Authorization头
xhr.setRequestHeader('Authorization', 'Bearer ' + params['access_token']);

4. 关于页面导航后的跨域问题 #

如果导航后的页面和之前的授权页面是同源的（也就是同协议、同域名、同端口，比如都是http://localhost:50656下的不同页面），那理论上不会有跨域问题——localStorage是同源共享的，你能正常读取到token，而且浏览器会自动在请求里带上Origin头，Google的API服务器会返回对应的Access-Control-Allow-Origin响应头。

如果导航后的页面是不同源的，那Google的API不会直接允许跨域请求，这时候你必须搭建一个后端代理：

• 前端请求你自己的后端服务器
• 后端服务器携带token调用Google Classroom API
• 后端把结果返回给前端
  这样就绕过了浏览器的同源策略限制，因为后端没有跨域限制。

调试小技巧 #

打开浏览器的开发者工具（F12），切换到Network面板，查看请求的详细信息：

• 检查请求的Origin头是否正确
• 查看响应的状态码（到底是404还是其他）
• 查看响应头里有没有Access-Control-Allow-Origin
  有时候浏览器的跨域错误提示会掩盖实际的HTTP错误（比如404），直接看Network面板能帮你找到问题根源。

备注：内容来源于stack exchange，提问作者Manuel Cera Vera