如何解决Windows身份验证登录后浏览器未重定向回Angular前端的问题？

这个问题我之前帮朋友排查过，核心原因是Windows身份验证的弹窗触发逻辑和跨域请求的交互导致的：当浏览器第一次请求API时（比如Angular页面初始化时直接调用需要权限的API接口），API返回401状态码触发Windows登录弹窗，用户登录成功后，浏览器默认会跳转到那个API的请求地址，而不是回到发起请求的前端页面。

下面是具体的解决方案：

1. 调整API请求时机，改用AJAX请求触发验证 #

不要让Angular在页面加载阶段就直接发起API请求，而是先完成前端页面的渲染，再通过AJAX请求调用API。这样即使触发登录弹窗，登录成功后浏览器会停留在前端页面，AJAX请求会自动完成并返回数据。

比如把原本在ngOnInit里直接调用API的逻辑，改成页面渲染完成后（比如用setTimeout或者在用户交互后）发起请求，或者先显示加载状态再发起请求。

2. 正确配置ASP.NET Core API的CORS和Windows身份验证 #

因为是跨域请求（前端在http://localhost:4200，API在http://localhost:53465），必须确保API允许前端的跨域请求并支持携带凭据：

在Startup.cs中配置CORS #

public void ConfigureServices(IServiceCollection services)
{
    // 添加CORS策略，允许前端域名的请求并支持凭据
    services.AddCors(options =>
    {
        options.AddPolicy("AllowLocalAngular",
            builder => builder.WithOrigins("http://localhost:4200")
                              .AllowCredentials()
                              .AllowAnyHeader()
                              .AllowAnyMethod());
    });

    // 启用Windows身份验证
    services.AddAuthentication(IISDefaults.AuthenticationScheme);

    // 其他服务配置...
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    // 先使用CORS中间件，要放在路由和身份验证之前
    app.UseCors("AllowLocalAngular");

    // 启用身份验证
    app.UseAuthentication();

    // 其他中间件配置（比如路由）...
}

配置IIS站点 #

确保API所在的IIS站点启用了Windows身份验证，同时禁用匿名身份验证，避免API返回匿名访问的情况。

3. 配置Angular的HTTP请求携带凭据 #

Angular的HttpClient默认不会携带跨域请求的凭据，需要通过拦截器或者请求配置强制开启withCredentials：

创建HTTP拦截器 #

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class CredentialsInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 克隆请求并添加withCredentials配置
    const modifiedRequest = request.clone({ withCredentials: true });
    return next.handle(modifiedRequest);
  }
}

在AppModule中注册拦截器 #

import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { CredentialsInterceptor } from './credentials.interceptor';

@NgModule({
  providers: [
    { 
      provide: HTTP_INTERCEPTORS, 
      useClass: CredentialsInterceptor, 
      multi: true 
    }
  ]
})
export class AppModule { }

4. 验证效果 #

完成以上配置后，重新启动API和Angular开发服务器：

• 访问http://localhost:4200，前端页面正常加载
• 当页面发起API请求时，浏览器会弹出Windows登录弹窗
• 登录成功后，AJAX请求会自动完成，页面会渲染API返回的数据，不会跳转到API的地址

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