Chrome v80升级后本地Angular应用访问Google Drive API出现间歇性CORS错误

我之前也碰到过类似Chrome版本更新引发的跨域问题，结合你的场景，咱们来梳理可能的原因和对应的解决办法：

1. 先排查Google API凭据的配置细节 #

虽然你之前应用运行正常，但Chrome v80对跨域校验的严格性有提升，建议再核对下Google Cloud Console里的配置：

• 确认OAuth 2.0客户端ID的已授权的JavaScript来源精确包含http://localhost:8080（注意端口号不能少，也不能多额外的斜杠）
• 再次确认Drive API和Spreadsheet API处于启用状态，有时候配额告警或者配置同步延迟也会导致偶发的跨域错误

2. 应对Chrome v80的SameSite Cookie政策变更 #

Chrome v80开始强制默认SameSite=Lax，这是很多跨域问题的导火索：

• 你可以先做个快速测试：在Chrome地址栏输入chrome://flags/#same-site-by-default-cookies，把这个选项设为Disabled，重启浏览器后再试请求。如果故障消失，那就是SameSite政策导致的。
• 长期解决方案：不要把access_token放在URL参数里（Google官方也不推荐这种方式，存在安全风险），改用Authorization请求头传递token，格式如下：

  Authorization: Bearer your_access_token
  

  Angular 9里用HttpClient的话，可以这样设置：

  this.http.get('https://www.googleapis.com/drive/v3/files/1PFCs5EHJVQBziah2bif9qVBzsCMYLcJ_?corpora=user&alt=media', {
    headers: new HttpHeaders({
      'Authorization': 'Bearer ' + your_token
    })
  });
  

3. 调整请求配置避免预检或缓存问题 #

偶发成功的情况大概率和请求缓存或预检请求有关：

• 给请求添加Cache-Control: no-cache头，避免浏览器复用旧的跨域响应缓存
• 如果你还在使用原生XMLHttpRequest，建议换成Angular的HttpClient，它会自动处理很多跨域相关的头设置，减少手动出错的概率

4. 用Angular代理绕过本地跨域限制 #

本地开发时最稳妥的方式是通过代理转发请求，完全规避CORS问题：

1. 在项目根目录创建proxy.conf.json文件，内容如下：

   {
     "/google-api": {
       "target": "https://www.googleapis.com",
       "secure": true,
       "changeOrigin": true,
       "pathRewrite": {
         "^/google-api": ""
       }
     }
   }
   

2. 启动Angular项目时加上代理配置：

   ng serve --proxy-config proxy.conf.json
   

3. 之后你的请求地址就改成/google-api/drive/v3/files/...，由本地代理转发到Google API，彻底解决跨域问题

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