[英]Angular 7 HttpClient post response headers are empty
I am trying to perform login from Angular 7 with Spring security backend:我正在尝试使用 Spring 安全后端从 Angular 7 执行登录:
login(username: string, password: string) {
const formData = new FormData();
formData.append('username', username);
formData.append('password', password);
return this.http.post<UserInfo>(`${API_URL}/login`, formData, {observe: 'response'})
.pipe(map(response => {
const jwtToken = response.headers.get(AUTHORIZATION).replace('Bearer', '').trim();
const userInfo = response.body;
if (jwtToken && userInfo) {
const user = new User(username, password, jwtToken, userInfo);
localStorage.setItem(CURRENT_USER, JSON.stringify(user));
this.currentUserSubject.next(user);
}
return response;
}));
}
But, response.headers is simply empty and contains no headers whatsoever.但是, response.headers 只是空的并且不包含任何标题。 Postman and Chrome dev tools show many headers and even the one I need - Authorization.
Postman 和 Chrome 开发工具显示了许多标题,甚至是我需要的标题 - 授权。 I have reviewed many SO questions and github issues, but they all say the same thing, which does not work for me - to simply list the header in CORS Access-Control-Expose-Headers, but I have done that and nothing changed.
我已经审查了许多 SO 问题和 github 问题,但它们都说同样的话,这对我不起作用 - 简单地在 CORS Access-Control-Expose-Headers 中列出标题,但我已经这样做了并且没有任何改变。 Here is a relevant Spring configuration:
这是一个相关的 Spring 配置:
@Bean
public CorsConfigurationSource corsConfigurationSource() {
CorsConfiguration configuration = new CorsConfiguration();
configuration.addAllowedOrigin("http://localhost:4200");
configuration.addExposedHeader("Authorization");
configuration.addAllowedMethod("*");
configuration.addAllowedHeader("*");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", configuration);
return source;
}
At this point I am stuck and have no idea how to make Angular access those headers:在这一点上,我被卡住了,不知道如何让 Angular 访问这些标头:
You need authorization header
, which you can get by response.headers.get("Authorization")
.您需要
authorization header
,您可以通过response.headers.get("Authorization")
。 Try:尝试:
const jwtToken = response.headers.get("Authorization").replace('Bearer', '').trim();
On server side you need to configure "Access-Control-Allow-Headers".在服务器端,您需要配置“Access-Control-Allow-Headers”。 Refer this post: Angular 6 Get response headers with httpclient issue .
请参阅这篇文章: Angular 6 Get response headers with httpclient issue 。
For me this configuration did the trick:对我来说,这个配置成功了:
@Bean
CorsConfigurationSource corsConfigurationSource() {
final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
config.addAllowedOrigin("*");
config.addExposedHeader(
"Authorization, x-xsrf-token, Access-Control-Allow-Headers, Origin, Accept, X-Requested-With, "
+ "Content-Type, Access-Control-Request-Method, Custom-Filter-Header");
config.addAllowedHeader("*");
config.addAllowedMethod("OPTIONS");
config.addAllowedMethod("GET");
config.addAllowedMethod("POST");
config.addAllowedMethod("PUT");
config.addAllowedMethod("DELETE");
source.registerCorsConfiguration("/**", config);
return source;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.