首先,对不起我的英语不好: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 { }