Я использую Angular 6 с перехватчиком HTTP, настроенным для применения токена переноса к исходящим запросам.
В сборке dev (ng serve) токен применяется, и все работает нормально. : -)
В производственной сборке (ng serve --prod) запрос отправляется без токена на предъявителя. : - (
В сборке prod я убедился, что заголовок применяется, выгрузив заголовки в консоль после их применения.
Понятия не имею, почему они исключены из запроса http.
В моих environment файлах НЕТ различий.
На что еще мне смотреть?
Что я могу сделать, чтобы это исправить?
Сначала я подумал, что это проблема между моей локальной средой и моей промежуточной средой, но затем я попытался запустить ng serve --prod локально и увидел те же результаты.
Все это говорит о том, что все идентично, кроме одного, являющегося производственной сборкой, и одного, являющегося сборкой разработки.
JWT-перехватчик:
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);
}
}
Вот что я вижу в консоли:
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 {
}