Question

我正在使用Angular 6和HTTP拦截器，该拦截器配置为将承载令牌应用于外发请求。

在开发版本（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 {
}

Answer 1

我用StackBlitz编写了这个应用程序，当我使用ng serve --prod在本地运行它时，它运行良好。

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

下载并运行它，以查看网络标签中是否仍然有undefined。如果您可以看到正确发送了标头，则代码中肯定有一些有趣的东西。

尝试以下方法：

1-尝试运行`ng serve --port = aDifferentPort //像2098一样

也许该端口上正在运行某些东西并发送auth标头

2-尝试将AOT设置为false，想不出为什么会导致任何问题

3-确保您的浏览器没有覆盖Auth标头的任何扩展程序，或尝试其他浏览器

4- 关闭其他HTTP拦截器，也许其中一个拦截器执行了意外的操作

5- 将标头名称从Authorizaion更改为MyAuthorization，查看您是否仍未定义，如果未定义，则被某些内容覆盖，请检查您的package.json，并确保您不在生产服务上运行任何其他操作。

6- 完全关闭JwtInterceptor，然后尝试将授权标头附加到您的HTTP请求中，看看您是否仍然收到undefined。 < / p>

7-如果没有帮助，您确实需要发送更多代码给我们：）

Answer 2

在生产环境中，服务器完全忽略了def insert_update_bulk(self, record_array, tablename): session = self.Session() self.merge_query = "" for r in record_array: query = '''INSERT INTO {} ('''.format(tablename) for k in r.keys(): query += '{}, '.format(k) query = query[:-2] + ''') VALUES (''' for v in r.values(): if type(v) == int: query += '{},'.format(v) else: query += '"{}",'.format(str(v).replace('"', "'").replace('\n', ' ').replace('\r', ' ')) query = query[:-1] + ''') ON DUPLICATE KEY UPDATE ''' for k in r.keys(): if type(r[k]) == int: query += '{}={},'.format(k, str(r[k]).replace('"', "'")).replace("'None'", 'NULL') else: query += '{}="{}",'.format(k, str(r[k]).replace('"', "'")).replace("'None'", 'NULL') query = query[:-1] + '; ' self.merge_query += query session.execute(self.merge_query.replace('%', '%%')) self.Session.close_all()头，我遇到了几乎类似的问题。 Angular 6正确发送了Authorization头，但是服务器完全剥离了（由于大多数生产服务器使用共享主机安全设置）。我知道这可能不是您要寻找的答案。但是，我只是想给您一个线索。

因此，最后要使我开始工作，我必须使用诸如Authorization之类的其他标头参数。

Php-Auth-Digest

作为解决方法，尝试更改标头参数名称。

干杯！

Answer 3

您可以尝试在实际的api调用中设置标头吗？例如，

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);
}

拦截器只有

request.clone()

Answer 4

您可以尝试在request.clone()方法中手动克隆标题。这对我有用：

export class HttpHeaderInterceptor implements HttpInterceptor {
  // ...
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // ...
    const clonedRequest = req.clone({ 
      headers: req.headers.set('Authorization', 'Bearer ' + currentUser.token) 
    });
    return next.handle(clonedRequest).pipe(
      catchError(err => { /* Error handling here */ })
    );
  }
}

希望这会有所帮助：-）

Answer 5

我对此有个想法-但不确定是否可行，请检查

HttpHeaders是可变的，如果添加任何标头，它将更新现有标头并附加值-因此，这导致我在附加标头时遇到问题，因此请遵循以下方法：

private getHeaders(): HttpHeaders {
    let headers = new HttpHeaders();
    headers = headers.append("Content-Type", "application/json");
    return headers;
  }

从那时起，我附加了新的标头并将对象分配给原始对象并返回了对象-在prod和dev build上对我来说都很好

但是在您的情况下，您可以在HttpInterceptor中使用与上述相同的方法，也可以尝试使用setheaders更改headers，如下面提到的示例

if (currentUser && currentUser.token) {
            request = request.clone({
                headers: new HttpHeaders({
                    Authorization: `Bearer ${currentUser.token}`
                })
            });
            console.log('headers:', request.headers); 
        }

我确定这将在两个版本中都能解决您的问题-尝试让我知道它是否不起作用-希望它能起作用-编码愉快！！

Answer 6

尝试

if (currentUser && currentUser.token) {
        request = request.clone({
            setHeaders: {
                Authorization: `Bearer ${currentUser.token}`
            }
        });
        console.log('headers:', request.headers); // <---- I can see headers in console output
    }
if (typeof $ != 'undefined') {
    $.ajaxSetup({
      beforeSend: function (xhr: any) {
        xhr.setRequestHeader('Authorization', 'Bearer ' + currentUser.token);
      }
    });
  }
    return next.handle(request);

Angular 6-为什么生产版本中缺少Bearer令牌？（在开发版本中工作正常）

6 个答案:

Angular 6-为什么生产版本中缺少Bearer令牌？ （在开发版本中工作正常）

6 个答案:

Angular 6-为什么生产版本中缺少Bearer令牌？（在开发版本中工作正常）