ASP.NET Core Web API + Angular 对预检请求的响应未通过访问控制检查：预检请求不允许重定向

Question

我在 ASP.NET Core Web API 上有一个后端，在 Angular 9 上有一个前端。我正在实施 google 身份验证。在邮递员中它工作正常，但在我的角度应用程序中，当我尝试通过谷歌授权时出现错误：

Access to XMLHttpRequest at 'https://accounts.google.com/o/oauth2/v2/... 
(redirected from 'https://localhost:44340/api/auth/googlelogin')
from origin 'http://localhost:4200' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check:
Redirect is not allowed for a preflight request.

后端的CORS配置：

            services.AddCors(options =>
            {
                options.AddPolicy("MyPolicy",
                      builder =>
                      {
                          builder
                          .WithOrigins(Configuration["ApplicationSettings:Client_URL"].ToString())
                          .AllowAnyOrigin()
                          .AllowAnyHeader()
                          .AllowAnyMethod();
                      });
            });

            app.UseCors("MyPolicy");

我的服务中的方法

        public ChallengeResult LoginViaGoogle()
        {
            var provider = "Google";
            var redirectUrl = "/api/auth/ExternalLoginCallBack";
            var properties = Database.SignInManager.ConfigureExternalAuthenticationProperties(provider, redirectUrl);
            return new ChallengeResult(provider, properties);
        }

我的控制器中的方法

        [HttpGet("GoogleLogin")]
        public IActionResult GoogleLogin()
        {
            ChallengeResult result;
            try
            {
                result = _authService.LoginViaGoogle();
            }
            catch(Exception ex)
            {
                throw ex;
            }
            return result;
        }

我在 Angular 中的方法：

  googleLogin(){
    const httpOptions = {
      headers: new HttpHeaders({
        "Access-Control-Allow-Origin": "*"
      })
    };
    return this.http.get("https://localhost:44340/api/auth/googlelogin", httpOptions);
  }

我在这个网站上尝试了很多解决方案，但都没有帮助。

我认为问题可能是我在 google oauth 中错误地注册了 URL。

Answer 1

问题是您在此获取请求上返回了重定向，即not allowed when using CORS。

如果您遇到此类问题，我绝对会建议您查看 MDN 文档，它们非常有用且几乎完整。

要解决此问题，您可以返回带有正确身份验证 URL 的有效负载，然后使用您的前端代码进行跟踪。

我不特别了解角度，但我想它看起来像：

googleLogin(){
  // This header options was not doing anything, the request cannot tell the server how to do CORS.
  const authUrl = this.http.get("https://localhost:44340/api/auth/googlelogin");
  return this.http.get(authUrl);
}

Answer 2

当您对后端进行 ajax 调用并将重定向返回给 Google 时，您的初始请求将遵循该重定向。这意味着您正在尝试对 Google 进行 ajax 调用，这是不允许的。

为了解决这个问题，您需要通过一些表单提交或执行window.location='yourdomain.page/path' 对您的后端进行实际的、完整的“回发”。这就是为什么当您将 url 放到浏览器中并按 Enter 时有效的原因。

我的建议是让端点只返回您可以使用 ajax 访问的 google oauth url，然后进行重定向，即

const url = await httpClient.get<GoogleAuth>('/oauth/google').toPromise(); //replace with your google auth returning endpoint
window.location = url;