服务器端Webapp的Google Oauth2的CORS问题

Question

我在SO上提到了这个问题：Google oauth 400响应：请求的资源上没有'Access-Control-Allow-Origin'标头， 但建议的解决方案是使用 隐式授权流的Javascript Web应用程序。

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

我已将http：// localhost：8300授权为Javascript来源，并从一个有角度的应用程序向驻留在http：// localhost：8300 / auth / oauth / test上的rest api发出了请求， 但仍然出现CORS错误：

无法加载 https://accounts.google.com/o/oauth2/v2/auth?client_id=568176070083-1lc20949a0q58l0rhmq93n95kvu8s5o6.apps.googleusercontent.com&redirect_uri=http://localhost:8300/auth/myauth/oauth/callback&response_type=code = https：//www.googleapis.com/auth/userinfo.email%20https：//www.googleapis.com/auth/userinfo.profile&state=EUTZF8：标头上没有'Access-Control-Allow-Origin'标头要求的资源。因此，不允许访问源' http：// localhost：8300 '。

我的问题是：

1. 解决方案是否在这里建议，唯一的出路？
2. 我错过了Google API页面上的一些配置吗？
3. 如果我直接从浏览器直接访问其余的api http：// localhost：8300 / auth / oauth / test，一切都会很好。但是，如果我正在从浏览器向此url发出get请求（由于它是安全的，则应进行重定向到google api，在身份验证之后，至少应击中该rest api断点）。因为在两种情况下都可以访问
   我的上一个假设是否错误？

如果这是相关的，我正在做角度获取请求，如：

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);
        });

}

编辑

其实我的第三点是为什么当通过XHR从角度应用程序通过XHR访问rest api时会抛出CORS，而该角度的应用程序也与rest api在同一个域中，而不是在直接从浏览器中访问rest api时却没有。

Answer 1

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

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

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

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