HTTP拦截器标头

Question

I'm trying to send in a specific header every time I'm doing a http request/post. But my problem is that I don't know if my interceptor actually works. Is there a way for me to check what headers I'm sending with my http?

//Service to send http

getTokenFromServer(data: Authentication): Observable <string>{
    //const serverUrl = 'http://localhost/broadcast-mock-server/getToken.php';
    const serverUrl = 'http://localhost:5000/token';

    const headers = new HttpHeaders();
    headers.append("Content-Type", "application/json");

    const obs = new Subject<string>();

    const formData = new FormData();
    formData.append('broadcasttoken', '769bcc1c-eba1-4425-a711-a7619d0ab3f1');

    formData.append('displayname', data.name);
    formData.append('password', data.password);

    this.http.post(serverUrl, formData, {headers: headers})
    .subscribe((response: Response) => { 

        if(response){
            console.log("Status:" +response.status);
            console.log("Message", response);               
            this.tokenService.setToken(response["access_token"]);
            return obs.next(response["access_token"]);
        }
    }, (error) => {
        console.log("Error code from server: " +error.status, error);
    });
    return obs.asObservable();

}

Interceptor that intercepts every http request

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // Get the auth header from the service.
        const authHeader = this.tokenService.getToken();
        // Clone the request to add the new header.
        if(req["url"].indexOf("/token") > -1 || req["url"].indexOf("/authenticate") > -1){
            //Don't add Authorization header
            return next.handle(req);
        }else{
            if(!authHeader){
                const authReq = req.clone({headers: req.headers.set('Authorization', authHeader)});
                return next.handle(authReq);
            }else{
                //Go to /authenticate
                const secureReq = req.clone({url: req.url.replace('http://', 'https://localhost:5000/authenticate')});
                return next.handle(secureReq);
            }
        }
    }

Answer 1

Just check browser inspector

if you want from console you can call:

request.headers.get("HEADER_NAME")

Answer 2

The easiest way would be to check is in the browser dev tools.

But the code you are using is probably not working.

const headers = new HttpHeaders();
headers.append("Content-Type", "application/json");

HttpHeaders is an immutable object you need to assign the headers append back to it

Like this:

let headers = new HttpHeaders();
headers = headers.append("Content-Type", "application/json");

Answer 3

Use dev tools provided by the different browser:

Chrome Dev Tools

Firefox Toolbox

Internet Explorer Developer Tools

Example for Chrome :

1. F12 (or right click on the page click on 'Inspect')
   • (Now the browser is recording the HTTP traffic)
2. Go to 'Network'
3. Run code that will make the call (via button click or whatever)
4. After that you will see all request/response, click on one of them and you will see the Client and the Server Header of the single Request/Response.