用于服务器端webapps的Google Oauth2的CORS问题

Question

我在SO上提到了这个问题：Google oauth 400 response: No 'Access-Control-Allow-Origin' header is present on the requested resource 但建议的解决方案是使用隐式授权流程 Javascript网络应用。

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

我已授权http://localhost:8300作为Javascript来源，并通过角度应用向http://localhost:8300/auth/oauth/test上的其他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&scope=https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile&state=EUTZF8：   请求中不存在“Access-Control-Allow-Origin”标头   资源。因此不允许来源“http://localhost:8300”   访问。

我的问题是：

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

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

CollectionType collectionType = mapper.getTypeFactory().constructCollectionType(List.class, PersonDetails.class);

List<PersonDetails> personDetails = mapper.readValue(content,collectionType);

修改

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

Answer 1

当您使用授权代码授权（OAuth2用于后端应用 - /auth）时，您必须将浏览器重定向到/auth端点 - 您不能使用XHR。验证后，用户将被重定向回来。

重定向到{{1}}端点后，用户需要在地址栏中看到该网页来自Google（可信来源），Google可能需要进行更多重定向才能对用户进行身份验证并提供同意页面。所以使用XHR是不可能的。

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

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