登录校验302重定向跳转时报跨域错误

某个请求校验未登录返回302重定向跳转时报跨域错误。
请求头中有'X-Requested-With': 'XMLHttpRequest'，xhr不允许跨域

image.png

解决办法：

后端和前端配合，返回响应的状态码和location属性，由前端替换url方式重新跳转location
注：不能返回302来重定向，因为浏览器自动执行302跳转其他页面，先监听到跨域报错后，再进到http的catchError，这时返回的xhr返回的status为0，无法进行正确逻辑判断

image.png

响应的http-intercept 拦截器代码:

  intercept(httpRequest: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let httpRequestUpdated = httpRequest.clone({ withCredentials: true });
    if (environment.production) {
      httpRequestUpdated = httpRequest.clone({ setHeaders: { 'X-Requested-With': 'XMLHttpRequest' } });
    }
    return next.handle(httpRequestUpdated).pipe(
      map(event => {
        if (event instanceof HttpResponse) {
          return event.clone({ body: event.body.body });
        } else {
          return event;
        }
      }),
      catchError(event => {
        console.log('intercept', event);
        const redirect = event.headers.get('Location');
        // location.href = `${window.location.origin}/api/login`;
        if (event.status === 401 && !isNil(redirect)) {
          // Handle page redirect
          window.location.href = redirect;
        } else if (event.status === 405 && !event.url.contains('logout')) {
          this.ticketService.logout().subscribe();
        }
        return throwError(event);
      })
    );
  }

xhr的status值为0的原因

The status attribute must return the result of running these steps:
  1.  If the state is UNSENT or OPENED, return 0.
  2.  If the error flag is set, return 0.
  3.  Return the HTTP status code.