Angular2 在获取资源时注意 302 重定向

Question

我需要从我公司持有的另一个域中提取一些资源。我想使用 GET 请求提取安全的 HTML 内容。

当用户退出应用程序时，请求的内容将返回 302 到登录页面。

我尝试嗅探 302 标头的尝试尚未得到我所希望的结果。我的 Observable 返回的响应是 200（登录页面）。

这是我的示例应用程序。

export class MenuComponent implements OnInit {

    private _resourceUrl = "http://localhost:3001/resources/menu";

    constructor(private _http: Http){
    }

    menu: string;

    ngOnInit(): void {
        this.getMenu()
            .subscribe(
                response => {
                    console.log(`Response status: ${response.status}`);

                    this.menu = response.text();
                },
                error => console.log(<any>error));
    }

    getMenu(): Observable<Response>{        
        return this._http.get(this._resourceUrl)
            .map((response: Response) => response)
            .catch(this.handleError);
    }

    private handleError(error: Response){
        console.log(error);
        return Observable.throw(error.json().error || 'Server Error');
    }
}

我走在正确的道路上吗？

Answer 1

如果服务器发送带有 302 状态代码的重定向，并在

Location

标头中包含要重定向的 URL，则浏览器会自动处理该重定向，即执行对此 URL 的请求。

这就是为什么 XHR（以及围绕它的 Angular2 包装器，即

Http

类）不会看到第一个请求的结果，而只能看到第二个请求的响应。

Answer 2

这是我用于重定向到 ServiceData 的工作代码。 Angular2(4) 和 ASP net Core。

private post(url: string, data?: any) {
    return this.http.post(url, data, { headers: this.headers })
      .map(response => this.extractData(response, true));
}

private extractData(res: Response, mapJson = true) {
    let body: any = res;
    // redirect
    if (body.url.search('ReturnUrl') != -1) {
        let url = new URL(body.url);

        // get patch redirect simple /account/login
        let pathname = url.pathname;

        // get params redirect simple ?ReturnUrl=%2Fapi%2Fitems%2FGetitems
        let search = url.search;

        // 1 navigate with params
        this.router.navigate.navigate([pathname], { queryParams: { returnUrl: search } });

        // OR ...

        // 2 navigate only pathname
        this.router.navigate.navigate([pathname]);
        return {};
    }            

    if (mapJson) {
        body = body.json();
    }
    return body || {};
}

Answer 3

如果使用 Angular

HttpClient，则

现有已接受的答案

在撰写本文时仍然有效。但是，现在可以使用

fetch

API 来了解是否即将发生重定向，这要归功于请求中的

redirect

选项。您可以禁用自动重定向的行为，以便了解重定向是否即将发生。

这是一些代码

from(
  fetch('https://mock.httpstatus.io/302', { redirect: 'manual' }),
).subscribe((response) => {
  if (!response.ok && response.type === 'opaqueredirect') {
    console.log(
      'A redirect was about to happen',
    )
    return
  }
})

请注意，如果使用 服务器端渲染 (SSR) 或 预渲染/静态站点生成 (SSG)，您还需要

fetch

在 Node.js 中可用。为了在服务器上运行相同的代码。

v16 中添加了 Node.js LTS 中

fetch

 的实验性支持，但需要通过 CLI 标志启用。从 v18 开始，不需要 CLI 标志。在 v21 中它很稳定。因此，当 v22 成为 LTS 时，它将成为第一个拥有稳定 API 的 Node.js LTS。如果不运行支持 

fetch 的 Node.js 版本，您也可以使用 polyfill

。

Angular

允许在底层使用 fetch HttpClient

 API。然而，

fetch

 的所有功能尚未到达 HttpClient API 表面。