I'm using Angular 6 with an HTTP Interceptor configured to apply bearer token to outgoing requests.
In the dev build (ng serve
), the token is applied and everything works fine. :-)
In the production build (ng serve --prod
) the request is sent out without bearer token. :-(
In the prod build, I have verified the header is being applied, by dumping the headers to the console after applying them.
I have no idea why they are excluded from the http request.
There are NO differences in my environment
files.
What else should I be looking at?
What can I do to fix this?
At first I thought this was an issue between my local environment and my staging environment, but then I tried running ng serve --prod
locally and saw the same results.
All that to say, everything is identical except one being a production build and one being a dev build.
jwt-interceptor:
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class JwtInterceptor implements HttpInterceptor {
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// add authorization header with jwt token if available
let currentUser = JSON.parse(localStorage.getItem('currentUser'));
if (currentUser && currentUser.token) {
request = request.clone({
setHeaders: {
Authorization: `Bearer ${currentUser.token}`
}
});
console.log('headers:', request.headers); // <---- I can see headers in console output
}
return next.handle(request);
}
}
Here's what I see in the console:
app.module.ts
import { HttpClientModule, HttpClient, HttpInterceptor } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { PortalModule } from '@angular/cdk/portal';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { JwtInterceptor } from './jwt-interceptor';
import { ENV } from '../environments/environment';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
...
import { myApiService } from './services/my-api.service';
import { myModalComponent } from './_components/my-modal/my-modal.component';
import { myModalService } from './services/my-modal.service';
import { AngularLaravelEchoModule, PusherEchoConfig, EchoInterceptor } from 'angular-laravel-echo/angular-laravel-echo';
export const echoConfig: PusherEchoConfig = {
userModel: 'App.User',
notificationNamespace: 'App\\Notifications',
options: {
broadcaster: 'pusher',
key: ENV.pusherConfig.key,
cluster: ENV.pusherConfig.cluster,
host: ENV.apiRoot,
authEndpoint: ENV.apiRoot + '/broadcasting/auth',
}
};
@NgModule({
declarations: [
AppComponent,
...
],
imports: [
BrowserModule,
HttpClientModule,
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
PortalModule,
AngularLaravelEchoModule.forRoot(echoConfig)
],
providers: [
myApiService,
myModalService,
{
provide: HTTP_INTERCEPTORS,
useClass: JwtInterceptor,
multi: true,
},
{
provide: HTTP_INTERCEPTORS,
useClass: EchoInterceptor,
multi: true
}
],
bootstrap: [AppComponent],
entryComponents: [
myModalComponent
]
})
export class AppModule {
}
Bearer tokens enable requests to authenticate using an access key, such as a JSON Web Token (JWT). The token is a text string, included in the request header. In the request Authorization tab, select Bearer Token from the Type dropdown list. In the Token field, enter your API key value.
Bearer tokens are a much simpler way of making API requests, since they don't require cryptographic signing of each request. The tradeoff is that all API requests must be made over an HTTPS connection, since the request contains a plaintext token that could be used by anyone if it were intercepted.
This type of token is known as a Bearer Token, meaning that it identifies the user that owns it, and defines a user session. A bearer token is a signed temporary replacement for the username/password combination!
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 :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With