Question

我们目前正在尝试在Angular2-App中访问Spring Boot应用程序的REST-Endpoint，但尽管Authorization标头在Postman中工作（Authorization / Basic dXNlcjp1c2Vy，对于具有密码用户的基本测试用户）），当应用程序尝试访问REST-Endpoint时，它不起作用。 Spring-Security配置如下：

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

@Override
protected void configure(AuthenticationManagerBuilder builder) throws Exception {
    builder.inMemoryAuthentication().withUser("user").password("user").roles("USER").and().withUser("admin")
            .password("admin").roles("ADMIN");
}

@Override
protected void configure(HttpSecurity http) throws Exception {
    http.authorizeRequests().anyRequest().fullyAuthenticated();
    http.httpBasic();
    http.csrf().disable();
}

}

角度应用在发出第一个请求之前会请求凭据，如下所示：

loginTest() {
    let headers: Headers = new Headers({'Content-Type': 'application/json', 'Accept': 'application/json'});
    headers.append('Authorization', 'Basic ' + window.btoa(this._username + ':' + this._password));
    console.log(headers);
    return this.http.get('http://localhost:8080/', {headers: headers})
        .map((res:any) => res.json);
}

使用localhost：8080作为Spring Boot应用程序。我们已经尝试添加Content-Policy标记，因为早期项目存在类似问题，如下所示：

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'unsafe-inline' 'unsafe-eval' 'self';
connect-src 'self' http://localhost:3000/ http://localhost:8080/ ws://localhost:3000/; img-src 'self' data:;
style-src 'unsafe-inline' 'self'; font-src 'self'"/>

但这也没有奏效。我们得到的错误：

XMLHttpRequest cannot load http://localhost:8080/. Response for preflight has invalid HTTP status code 401

通过Chrome查看请求时，这是响应：

HTTP/1.1 401 Unauthorized
Server: Apache-Coyote/1.1
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
X-Frame-Options: DENY
Set-Cookie: JSESSIONID=4659A74A950FE6C99948D8F4CB245E27; Path=/; HttpOnly
WWW-Authenticate: Basic realm="Realm"
Access-Control-Allow-Origin: http://localhost:3000
Vary: Origin
Access-Control-Allow-Methods: GET
Access-Control-Allow-Headers: accept, authorization, content-type
Access-Control-Allow-Credentials: true
Allow: GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH
Content-Length: 0
Date: Mon, 04 Jul 2016 07:54:30 GMT

与PostMan相比，我不知道Angular2-App的功能有何不同。

Answer 1

我认为您的问题与CORS有关。 Postman是一个chrome插件，因此它具有执行CORS请求的权限。你的Angular应用程序不是这样的：它更受限制。

看到这个问题：

how Postman send requests? ajax, same origin policy

在Angular的情况下，您需要处理CORS。您有一个在发送实际请求之前发送的预检请求（OPTIONS）。我认为在您的情况下，凭据不会发送到此预检请求中，因此服务器无法对其进行身份验证并返回401状态代码。这可以防止执行目标请求。

我看到两个解决方案：

使用withCredentials参数为true（在RC2的Angular2中可用）
```
this.http.get('http://...', { withCredentials: true })...
```
仅检查目标请求的安全性，而不检查预检请求的安全性。这是在服务器端进行的配置。

有关详细信息，请参阅这些文章：

通过Basic Auth抛出Angular2访问REST＆＃34;预检的响应具有无效的HTTP状态代码401＆＃34;

1 个答案: