Angular 2基本身份验证不起作用

9 浏览
0 Comments

Angular 2基本身份验证不起作用

我正在尝试使用Angular2连接/发起POST请求到一个API，这个API是一个带有基本身份验证密码的简单API。

当禁用API上的密码时，一切正常工作。但是当我启用基本身份验证时，Angular无法连接到API。在Postman中一切正常。我尝试了以下方法但没有成功。

我有两个头部"Content-Type"和"Authorization"

headers.append("Content-Type", "application/x-www-form-urlencoded");

我尝试了这两个头部。

headers.append("Authorization", "Basic " + btoa(用户名 + ":" + 密码)); 
headers.append("Authorization", "Basic VXNlcm5hbWU6UGFzc3dvcmQ=");

我唯一找到的问题是在原始请求头中只有一行头部名称，但是缺少值：

Access-Control-Request-Headers: authorization, content-type

原始头部：

#请求头部

OPTIONS /shipment HTTP/1.1

Host: api.example.com

Connection: keep-alive

Access-Control-Request-Method: POST

Origin: http://localhost:4200

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36

Access-Control-Request-Headers: authorization, content-type

Accept: */*

Referer: http://localhost:4200/address

Accept-Encoding: gzip, deflate, sdch

Accept-Language: en-US,en;q=0.8,nl;q=0.6

希望有人能帮助。

0

3 答案

0 Comments

问题的出现的原因是Angular 2在标准化授权头时出现了问题。标准化后的授权头应该是"authorization" => "basic xxx"，而不是"authorization" => "Authorization"。这个问题可以在后端解决。

解决方法是在代码中将新的headers赋值给原来的headers变量，如下所示：

headers = headers.append(...);

这个解决方法在这个stackoverflow链接中也提到了。

0
0 Comments

Angular 2基本身份验证无法正常工作

最近，有用户在GitHub上反馈了一个关于Angular 2基本身份验证不起作用的问题。用户称尝试了很多小时来解决这个问题，最终发现了一个解决方法。

在GitHub上的一个讨论中，用户jrcastillo提到了另一种解决方法，他在这里建议：

public void configure(WebSecurity web) throws Exception {
    web.ignoring().antMatchers(HttpMethod.OPTIONS, "/**");
}

这个方法只需要一行代码，但它解决了他的问题。

然而，用户发现这个方法对于他的"/login"路径不起作用。所以他做了一些修改，改为：

public void configure(WebSecurity web) throws Exception {
    web.ignoring().antMatchers(HttpMethod.OPTIONS, "/api/**");
}

这样他就解决了问题。

如果你在使用Angular 2进行基本身份验证时遇到问题，你可以尝试上述的两种解决方法，看是否能解决你的问题。

0
0 Comments

Angular 2基本身份验证无法正常工作的原因是发送的请求不是POST请求，而是OPTION请求。根据https://developer.mozilla.org/fr/docs/HTTP/Access_control_CORS，您需要在API端允许OPTIONS请求。如果您使用的是Spring应用程序，您可以在Spring Security配置中添加以下代码来实现：

protected void configure(HttpSecurity http) throws Exception {
    http.csrf().disable()
        .authorizeRequests()
        .antMatchers(HttpMethod.OPTIONS, "/**").permitAll()
        (..)
}

在我的情况下，这种方法有效。

0