服务器端 Web 应用程序的 Google Oauth2 的 CORS 问题

我在SO上提到了这个问题：Google oauth 400 响应：请求的资源上不存在“Access-Control-Allow-Origin”标头 https://stackoverflow.com/questions/36688035/google-oauth-400-response-no-access-control-allow-origin-header-is-present-on但建议的解决方案是JavaScript 网络应用程序 using 隐性拨款流.

我的设置是这样的，我的前端是基于 Angular 4 构建的，但我将其打包并将其与其余 api 一起部署在同一服务器上。 Si 我正在跟踪服务器端 Web 应用程序流程：https://developers.google.com/identity/protocols/OAuth2WebServer https://developers.google.com/identity/protocols/OAuth2WebServer （以下示例中服务器端口为8300）

我已授权http://本地主机:8300 http://localhost:8300作为 Javascript 起源，并从 Angular 应用程序向驻留在其上的 REST API 发出请求http://localhost:8300/auth/oauth/test http://localhost:8300/auth/oauth/test但我仍然收到 CORS 错误：

加载失败: 请求中不存在“Access-Control-Allow-Origin”标头 资源。起源 'http://本地主机:8300 http://localhost:8300' 因此不允许 使用权。

我的问题是 :

1. 是否建议解决方案here https://stackoverflow.com/questions/36688035/google-oauth-400-response-no-access-control-allow-origin-header-is-present-on，唯一的出路？
2. Google API 页面上是否有一些我错过的配置？
3. 如果我直接访问rest apihttp://localhost:8300/auth/oauth/test http://localhost:8300/auth/oauth/test直接从浏览器，一切都很好。但是，如果我从浏览器向此 url 发出 get 请求（因为它是安全的，因此应该重定向到 google api，在身份验证后，至少应该命中此其余 api 断点）。因为在这两种情况下，它都可以访问
   我最后的假设是错误的吗？

如果这是相关的，我正在执行 Angular get 请求，如下所示：

loginWithGoogle(){
    console.log(" Login with oauth2 ");
    let oauthUrl = "http://localhost:8300/auth/oauth/test";
    return this.http.get(oauthUrl)                                
      .subscribe(
        res => {                    
          this.onSuccess(res);
        }, error => {
          this.onFailure(error);
        });

}

EDIT

实际上，我的第三点是为什么当从角度应用程序通过 XHR 访问 REST API 时会抛出 CORS，该应用程序也与 REST API 位于同一域，而不是直接从浏览器访问 REST API 时抛出 CORS。

当您使用授权代码授予（后端应用程序的 OAuth2 -&response_type=code），您必须将浏览器重定向到/auth端点 - 您不能为此使用 XHR。身份验证后，用户将被重定向回来。

重定向到之后/auth端点，用户需要在地址栏中看到该页面来自 Google（可信来源），并且 Google 可能需要执行更多重定向才能对用户进行身份验证并显示同意页面。所以使用XHR是不可能的。

更新：对于第三点，如果请求不包含有效凭据（而不是像现在那样的 HTTP 30x 重定向），您的后端 API 应返回 HTTP 401。然后，您的 Angular 应用程序需要一个 HTTP 错误处理程序，用于在 HTTP 401 响应上重定向浏览器。

但如果您想将令牌保留在 Angular 应用程序中，最好使用隐式授予，它是为在浏览器中运行的应用程序设计的。因为使用授权代码授予，您的后端具有客户端的角色（在 OAuth2 方案中），但您希望 Angular 应用程序成为客户端（因为它持有令牌）。