从angular发送Bearer令牌时出现CORS问题

Question

问题是在向localhost发送GET请求时未发送授权标头。飞行前请求(OPTIONS(不包含授权标头，并返回401状态。我正在使用Angular拦截器将头添加到我的请求中，并将Spring Boot作为后端服务器。这是Developer Firefox中发送GET请求时的控制台。在此处输入图像描述

Answer 1

您的CORS过滤器：

import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.core.Ordered;
import org.springframework.stereotype.Component;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import java.util.Arrays;
import java.util.List;    
@Component
public class CorsFilterConfig {
public static final List<String> allowedOrigins = Arrays.asList("*");
@Bean
public FilterRegistrationBean<CorsFilter> initCorsFilter() {
// @formatter:off
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
config.setAllowedHeaders(Arrays.asList("Authorization", "Cache-Control", "Content-Type"));
config.addAllowedMethod("*");
config.setAllowedOrigins(allowedOrigins);
source.registerCorsConfiguration("/**", config);
FilterRegistrationBean<CorsFilter> bean = new FilterRegistrationBean<>(new CorsFilter(source));
bean.setOrder(Ordered.HIGHEST_PRECEDENCE);
return bean;
// @formatter:on
}
}

角度拦截器：

import { Injectable } from '@angular/core';
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor,
HttpResponse
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { AppService } from '../services/app.service';
import { Router } from '@angular/router';
import { environment } from 'src/environments/environment';
import { tap } from 'rxjs/operators';
import { ProgressBarService } from '../services/progress-bar.service';
@Injectable()
export class HttpTokenInterceptor implements HttpInterceptor {
constructor(private app: AppService, private router: Router,
private progressService: ProgressBarService) {
}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const url = environment.api_url;
if (req.url.indexOf('/oauth/') === -1) {  
const token = this.app.getToken();
const contentType = req.url.indexOf('/fileupload') >= 0  ? 'multipart/form-data' : 'application/json; charset=utf-8';
let changeReg = req.clone({
url: url + req.url,
headers: req.headers
.set('Content-Type', 'application/json; charset=utf-8')
.set('Accept', 'application/json; charset=utf-8')
.set('Authorization', token)
});
if (req.url.indexOf('/upload') >= 0 || req.url.indexOf('/fileupload') >= 0) {
changeReg = req.clone({
url: url + req.url,
headers: req.headers
.set('Authorization', token)
});
}
this.progressService.show();
return next.handle(changeReg).pipe(
tap((event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
this.progressService.hide();
}
}, (error) => {
this.progressService.hide();
})
);
} else {
this.progressService.show();
const changeReg = req.clone({ url: url + req.url});
return next.handle(changeReg).pipe(
tap((event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
this.progressService.hide();
}
}, (error) => {
this.progressService.hide();
})
);
}
}
}

只要去掉对你来说多余的东西，祝你好运。