Angular2通过基本验证访问REST抛出“预检响应包含无效的HTTP状态代码401”

Question

我们目前正在尝试在Angular2-App中访问Spring Boot应用程序的REST-Endpoint，但尽管Authoration标头在Postman中有效（Authorize/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应用程序。我们已经尝试添加内容策略标签，因为早期的项目也有类似的问题，比如:

<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

我看不出Angular2应用程序与PostMan相比有什么不同。

Answer 1

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

请参阅此问题：

• 邮递员如何发送请求？ajax，同源策略

对于Angular，您需要处理CORS。您有一个预选请求（OPTIONS），该请求在发送实际请求之前发送。我认为在您的情况下，凭证不会被发送到这个预启动的请求中，因此服务器无法对其进行身份验证，并html" target="_blank">返回401状态代码。这将阻止执行目标请求。

我认为有两种解决方案:

>

将withCredentials参数设置为true（在RC2的Angular2中可用）

this.http.get('http://...', { withCredentials: true })...

只检查目标请求的安全性，而不检查预触发请求的安全性。这是在服务器端进行的配置。

有关更多详细信息，请参阅以下文章：

< Li > http://rest let . com/blog/2015/12/15/understanding-and-use-CORS/ < Li > http://rest let . com/blog/2016/09/27/how-to-fix-CORS-problems/