使用弹簧引导以角度成功调用 OPTIONS 后不调用 GET 请求

Question

我正在尝试使用 Angular 和 Spring Boot 实现登录功能。

我正在关注春季教程https://spring.io/guides/tutorials/spring-security-and-angular-js/ 但就我而言，我的 Angular 项目托管在 localhost:4200 上，spring 托管在 localhost:8080 上

现在我正在向 Spring 服务器发送一个“/用户”请求。我的角度代码看起来像：

const headers = new HttpHeaders(credentials ? {
        authorization: 'Basic ' + btoa(credentials.username + ':' + credentials.password)
    } : {});

    this.http.get('http://localhost:8080'+'/user', { headers: headers }).subscribe(response => {
        if (response['name']) {
            this.authenticated = true;
        } else {
            this.authenticated = false;
        }
        return callback && callback();
    });

现在由于 CORS，它会发送 OPTIONS 请求，该请求成功，状态为 200。 在此之后，它不会发送实际的 GET 请求，该请求应该将凭据发送为 Angular $http is sending OPTIONS instead of PUT/POST

我的 spring 代码如下所示：

@CrossOrigin(origins = "*", maxAge = 3600, allowedHeaders={"x-auth-token", "x-requested-with", "x-xsrf-token"})
@RequestMapping("/user")
public Principal user(Principal user) {
    return user;
}

@Configuration
@Order(SecurityProperties.DEFAULT_FILTER_ORDER)
protected static class SecurityConfiguration extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.httpBasic().and().cors().and().authorizeRequests().antMatchers("/index.html", "/", "/home", "/login").permitAll()
                .anyRequest().authenticated().and().csrf()
                .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());
    }
}

我还在 pom 文件中添加了 Spring Security。

请您帮忙看看为什么 GET 请求在 OPTIONS 请求后没有被触发。

Answer 1

根本原因： 在您的 Spring Security 中，您只允许三种类型的请求标头，即allowedHeaders={"x-auth-token", "x-requested-with", "x-xsrf-token"}

但是，在您的http.GET 请求中，您正在使用标头名称作为authorization 进行基本身份验证，这被Spring Security 拒绝。因此，spring 将允许的标头响应到您的浏览器（即使用 OPTIONS 方法的预检请求）并且您的浏览器会看到.. Ooops.. authorization 标头是不允许的，所以我无法继续进行原始 GET 调用。

解决方案： 在您的弹簧安全中也允许authorization 标头。它应该工作。!!