Angular 5无法读取Spring应用程序的响应标头

时间:2018-01-20 20:05:13

标签: angular spring-mvc spring-security jwt angular5

我在Angular 5中的Spring Boot和客户端应用程序中编写REST服务,并且在成功登录后,Angular应用程序无法按名称读取标题,但在chrome开发人员工具Network中我得到所有标题:

Chrome回复标题:

Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:http://localhost:4200
Authorization:Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbi5hZG1pbkBnbWFpbC5jb20iLCJjcmVhdGVkIjoxNTE2NDc2MzMxNzIwLCJleHAiOjE1MTcwODExMzF9.pbytQyt1CywO2B8vo41ynhQ1VjzG9Wb-Bf-zpUkHNW9O4XWX4TD0A2PMyQJNlk-pCrgbxInHO67ibv4eAO8r0Q
Cache-Control:no-cache, no-store, max-age=0, must-revalidate
Content-Length:0
Date:Sat, 20 Jan 2018 19:25:41 GMT
Expires:0
Pragma:no-cache
Role:ADMIN
Vary:Origin
X-Application-Context:application:oracle:8091
X-Content-Type-Options:nosniff
X-Frame-Options:DENY
X-XSS-Protection:1; mode=block

但是当我尝试在控制台中打印时,我没有得到这些标题。

public login(loginRequest: LoginRequest): Observable<Response> {
    return this.http.post(
      this.loginUrl,
      JSON.stringify(loginRequest),
      { headers: this.headers }
    );
  }

public login() {
    console.log(this.request);

    this.loginService.login(this.request)
      .subscribe(res => {
        if (res.status === 200) {
          console.log('Response: ', res);
          console.log('authorization: ', res.headers.get('Authorization'));
        }
      }, error => {
        if (error.status === 401) {
          console.log('Error');
        }
      });
  }

结果是:

Response:  
Response {_body: "", status: 200, ok: true, statusText: "OK", headers: Headers, …} 
headers: Headers
   headers: Map(3) {"pragma" => Array(1), "cache-control" => Array(1), "expires" => Array(1)}
   normalizedNames: Map(3) {"pragma" => "pragma", "cache-control" => "cache-control", "expires" => "expires"}
   __proto__: Object
   ok: true
   status: 200
   statusText: "OK"
   type: 2
   url: "http://localhost:8091/login"
   _body: ""

而且我不知道哪一方是错误因此我必须附加Spring Security配置:

@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    private AuthenticationEntryPointImpl unauthorizedHandler;

    @Autowired
    private UserDetailsService userDetailsService;

    @Autowired
    private AuthenticationTokenFilter authenticationTokenFilter;

    @Autowired
    private BCryptPasswordEncoder passwordEncoder;

    @Autowired
    public void configureAuthentication(AuthenticationManagerBuilder authenticationManagerBuilder) throws Exception {
        authenticationManagerBuilder
                .userDetailsService(this.userDetailsService)
                .passwordEncoder(passwordEncoder);
    }

    @Override
    protected void configure(HttpSecurity httpSecurity) throws Exception {
        httpSecurity
                .csrf().disable()
                .exceptionHandling().authenticationEntryPoint(unauthorizedHandler)
                .and()
                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                .and()
                .authorizeRequests()
                .antMatchers(
                        HttpMethod.POST,
                        "/register",
                        "/login"
                ).permitAll()
                .anyRequest().authenticated()
                .and().cors();

        httpSecurity.addFilterBefore(
                authenticationTokenFilter,
                UsernamePasswordAuthenticationFilter.class
        );

        httpSecurity
                .headers().cacheControl();
    }

1 个答案:

答案 0 :(得分:1)

您的问题是,当您的后端没有明确说明要公开它们时,angular会隐藏所有标题。

这是通过在您的cors配置中添加新标头来完成的。如果我记得,标题是

Access-Control-Expose-Headers

您必须将标题作为值添加,例如

Authorization,Content-type

我正在打电话,所以我不愿意在网上寻找更多文档,抱歉