Angular 4环境下如何从网络请求头获取SAML响应（含图示场景）

Hey there! Let's walk through how to retrieve a SAML response from HTTP headers in Angular 4, including the specific scenario you mentioned with your network request headers.

First, Critical Pre-Requisite: CORS Configuration #

Before diving into Angular code, make sure your backend allows frontend access to the SAML-related header. Browsers block access to non-standard headers due to CORS policies, so your backend needs to add the header name to the Access-Control-Expose-Headers response header. For example, if your SAML response is in a header named SAMLResponse, the backend should send:

Access-Control-Expose-Headers: SAMLResponse

Without this, Angular will not be able to read the header, even if it shows up in your network tab.

Option 1: Retrieve from a Direct HTTP Request #

Angular 4 has two HTTP modules you might be using—Http (the older implementation) or HttpClient (introduced in Angular 4.3+). Here's how to handle both:

Using the Older Http Module

import { Http, Response } from '@angular/http';
import { Injectable } from '@angular/core';

@Injectable()
export class SamlService {
  constructor(private http: Http) {}

  getSamlResponse() {
    this.http.get('your-target-api-url')
      .subscribe(
        (response: Response) => {
          // Grab the SAML header value
          const samlHeaderValue = response.headers.get('SAMLResponse');
          if (samlHeaderValue) {
            // SAML responses are usually Base64 encoded—decode it to get the XML content
            const decodedSaml = atob(samlHeaderValue);
            console.log('Decoded SAML Response:', decodedSaml);
            // Process the decoded response as needed here
          } else {
            console.log('No SAML Response found in headers');
          }
        },
        (error) => console.error('Request failed:', error)
      );
  }
}

Using HttpClient (Recommended for Angular 4.3+)

With HttpClient, you need to set observe: 'response' to access the full HTTP response (including headers):

import { HttpClient, HttpResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class SamlService {
  constructor(private http: HttpClient) {}

  getSamlResponse() {
    this.http.get('your-target-api-url', { observe: 'response' })
      .subscribe(
        (response: HttpResponse<any>) => {
          const samlHeaderValue = response.headers.get('SAMLResponse');
          if (samlHeaderValue) {
            // Decode Base64 (add URL-decoding if the value was URL-encoded first)
            const decodedSaml = atob(samlHeaderValue);
            // Use this line instead if URL-encoded:
            // const decodedSaml = decodeURIComponent(atob(samlHeaderValue));
            console.log('Decoded SAML Response:', decodedSaml);
          } else {
            console.log('No SAML Response found in headers');
          }
        },
        (error) => console.error('Request failed:', error)
      );
  }
}

Option 2: Catch SAML Headers Globally with an Interceptor #

If you need to capture SAML headers across multiple requests, use an HTTP interceptor (only available with HttpClient):

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

@Injectable()
export class SamlInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).do(event => {
      if (event instanceof HttpResponse) {
        const samlHeaderValue = event.headers.get('SAMLResponse');
        if (samlHeaderValue) {
          const decodedSaml = atob(samlHeaderValue);
          console.log('Intercepted SAML Response:', decodedSaml);
          // Store this in a service or process it directly here
        }
      }
    });
  }
}

Then register the interceptor in your app module:

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { SamlInterceptor } from './saml.interceptor';

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

For Your Specific Request Header Scenario #

If your network request uses a custom-named header (like X-SAML-Response instead of SAMLResponse), just replace the string inside headers.get() with your actual header name. For example:

const samlHeaderValue = response.headers.get('X-SAML-Response');

Double-check the exact header name from your network tab (it's case-sensitive!) and confirm the backend has exposed it via CORS.

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