Angular 6 - Why is Bearer Token missing in production build? (works fine in dev build)

I wrote this app in StackBlitz, and it's working fine when I run it locally with ng serve --prod.

https://stackblitz.com/edit/angular-yzckos

Download it and run it to see if you're still getting undefined in your network tab. If you can see the header properly being sent, then there's definitely something funny in your code.

Try bellow :

1- try running `ng serve --port=aDifferentPort // like 2098

Maybe there's something running on that port and sending auth header

2- Try with AOT false, can't think of why that would cause any issue

3- Make sure your browser doesn't have any extension that overrides the Auth header or try other browsers

4- Turn off your other HTTP interceptors, maybe one of them does something unexpected

5- Change the header name from Authorizaion to MyAuthorization, see if you're still getting undefined, if you don't, then it's being overridden by a something, check your package.json and make sure you're not running anything else on the production serve.

6- Turn off the JwtInterceptor altogether and try attaching the authorization header to your HTTP request, see if you're still getting undefined.

7- If none helped, you really need to send more code to us :)

I have had almost the similar issue in the production environment where server completely ignores the Authorization header. Angular 6 sends the Authorization header properly but server strips out completely (Due to most of production server, shared hosting security settings). I know this might not be the answer you looking for. But, I just wanted give you a clue.

So, finally for me to get this working, I had to use a different header parameter such as Php-Auth-Digest, like this.

request = request.clone({    setHeaders: {      "Php-Auth-Digest": `Bearer ${currentUser.token}`,    }  });

As a workaround try changing your header parameter name.

Cheers!

Can you try setting the header in the actual api call? Like, example:

put(path: string, body: Object = {}): Observable<any> {return this.http.put(`${environment.api_url}${path}`, body, { headers:      this.setHeaders() })     .map((res: Response) => {        return res;     });}private setHeaders(): HttpHeaders {    const headersConfig = {      'Content-Type': 'application/json',      'Accept': 'application/json',      'Authorization': 'Bearer ' + this.oauthService.getAccessToken()    };    return new HttpHeaders(headersConfig);}

And interceptor will have just the

request.clone()