令牌拦截器未将令牌添加到获取请求

时间:2019-01-24 22:21:35

标签: angular bearer-token

首先,对不起我的英语不好:D。 这是我尝试使用承载令牌授权执行get请求时得到的错误:

  

选项http://myUrl/balanca/web/Transportadora 401(未经授权)   从CORS策略阻止了对源“ http://myUrl/balanca/web/Transportadora”处“ http://localhost:4200”处XMLHttpRequest的访问:对   预检请求未通过访问控制检查:它没有HTTP正常状态。

 OPTIONS http://myUrl/balanca/web/Transportadora 401 (Unauthorized)
 Access to XMLHttpRequest at 
 'http://myUrl/balanca/web/Transportadora' from origin 
 'http://localhost:4200' has been blocked by CORS policy: Response to 
 preflight request doesn't pass access control check: It does not have HTTP 
 ok status.

我尝试了几种编辑http请求标头的方法,我认为在将令牌放入标头的这一部分做错了。我确定网址不是问题或令牌,因为我在邮递员上进行了测试,并且在那里工作了。

令牌拦截器

import { Injectable, Injector } from '@angular/core';
import { HttpInterceptor,  HttpHandler, HttpRequest, HttpEvent, 
HttpResponse } from '@angular/common/http' 
import { AuthService } from './auth.service';
import { Observable } from 'rxjs';

@Injectable()
export class TokenInterceptorService implements HttpInterceptor {

constructor(private injector: Injector,
          private authService: AuthService){}

intercept(req: HttpRequest<any>, next: HttpHandler): 
Observable<HttpEvent<any>> {
if (this.authService.getToken()) {
  const authReq = req.clone({
    headers: req.headers.set(
     'Authorization', 'Bearer ' + this.authService.getToken()
    )  

  });
  console.log(authReq)
  console.log('Making an authorized request');
  req = authReq;
}
return next.handle(req)
}

}

服务

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import {ITransportadora} from './transportadora/transportadora'

@Injectable()
export class DashboardEventService {

private _transportadoraUrl = 
"my_url";

constructor(private http: HttpClient) { }

getTransportadora(): Observable<ITransportadora[]>{
  return this.http.get<ITransportadora[]>(this._transportadoraUrl)

}
}

组件

export class TransportadoraListComponent implements OnInit {
public transportadoras = [];
constructor(private _dashEventService: DashboardEventService) { }

 ngOnInit() {
   this._dashEventService.getTransportadora()
   .subscribe(data => this.transportadoras = data)

 }

}

应用模块

import { AuthGuard } from './auth.guard';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { LoginComponent } from './login/login.component';
import { AuthService } from './auth.service';
import { DashboardEventService } from './dashboardEvent.service';
import { TokenInterceptorService } from './token-interceptor.service';
import { TransportadoraListComponent } from 
'./transportadora/transportadora-list.component';
import { TransportadoraDetailComponent } from 
'./transportadora/transportadora-detail.component';


@NgModule({
 declarations: [
  AppComponent,
  LoginComponent,
  DashboardComponent,
  TransportadoraListComponent,
  TransportadoraDetailComponent
],
imports: [
  BrowserModule,
  FormsModule,
  HttpClientModule,
  AppRoutingModule
],
providers: [AuthService, AuthGuard, DashboardEventService, 
HttpClientModule, TokenInterceptorService, 
{
provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptorService,
multi: true
}],
bootstrap: [AppComponent]
})
export class AppModule { }

0 个答案:

没有答案