Angular 4.3 HTTPClient 基本授权不起作用

Question

我正在尝试使用新发布的HttpClient 在Angular 4 中实现基本授权。

我正在尝试使用暴露的 REST API 连接到在 Tomcat 上运行的 Spring 应用程序。

我的LoginComponent 中有以下代码：

onSubmit(user){
   console.log(user);
   const body = JSON.stringify({username: user.userName, password: user.password});

   let headers = new HttpHeaders();
   headers.append("Authorization", "Basic " + btoa("username:password"));
   headers.append("Content-Type", "application/x-www-form-urlencoded");

   this.http.post('my url here',body, {headers: headers}).subscribe(response => {
         console.log(response);
   }, err => {
      console.log("User authentication failed!");
   });
}

但是，请求根本没有添加Authorization 标头。

这是来自Chrome 工具Network 选项卡：

我做错了什么？ 我怎样才能做到这一点？

---

更新 1：它仍然无法正常工作：

我改变了我的两行如下：

headers = headers.append("Authorization", "Basic " + btoa("username:password"));
headers = headers.append("Content-Type", "application/x-www-form-urlencoded");

我按预期在请求中获取标题。这是来自Chrome：

但是，post call 仍然失败。

在服务器端，我的代码是：

protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
    String authCredentials = request.getHeader("Authorization");

    if(authCredentials == null) {
        logger.info("Request with no basic auth credentials {}", request.getRequestURL());
        response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
        return;
    }

    // do my stuff
}

电话永远打不通do my stuff。 authCredentials 是 null。

这是来自chrome：

如何进行？

Answer 1

HttpHeaders 是不可变的，因此您需要分配函数的结果以在每次调用时覆盖headers 对象。

let headers = new HttpHeaders();
headers = headers.append("Authorization", "Basic " + btoa("username:password"));
headers = headers.append("Content-Type", "application/x-www-form-urlencoded");

来源：Angular Docs

Answer 2

你好，你的后端 cors 配置可以吗

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class RestConfig {
    @Bean
    public CorsFilter corsFilter() {
         UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("DELETE");
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
     }
 }

你的角度要求应该是这样的，

import { Http , Headers, Response } from '@angular/http';
let headers = new Headers();
headers.append("Authorization", "Basic " + btoa("username:password"));
headers.append("Content-Type", "application/x-www-form-urlencoded");

您也可以查看 githup repo 示例演示 spring mvc with angular2/4

Answer 3

我遇到了同样的问题，并且授权标头没有与发布请求一起使用。 这是我的身份验证功能

authenticate(username, password) {
const headers = new HttpHeaders({ Authorization: 'Basic ' + btoa(username + ':' + password) });

return this.httpClient.post<any>('<your-login-url>',{headers}).pipe(
 map(
   userData => {
    sessionStorage.setItem('username',username);
    return userData;
   }
 )
);

我不知道该帖子需要第二个参数作为正文，第三个作为标题。 在提出这个问题后，我从问题本身发现我需要将第二个参数作为空白 json 发送，因为我的正文中没有任何内容。

这是上述验证功能的正确代码

authenticate(username, password) {
const headers = new HttpHeaders({ Authorization: 'Basic ' + btoa(username + ':' + password) });

return this.httpClient.post<any>('<your-login-url>',{},{headers}).pipe(
 map(
   userData => {
    sessionStorage.setItem('username',username);
    return userData;
   }
 )
);

现在工作正常。

Answer 4

使用RequestOptions 为您的发布请求设置标头。

    import { Http,Headers,RequestOptions } from '@angular/http';
    ..
    ..
    let headers = new Headers();
    headers.append("Authorization", "Basic " + btoa("username:password"));
    headers.append("Content-Type", "application/x-www-form-urlencoded");

    let options = new RequestOptions({ headers: headers });
    this.http.post('my url here',body, options).subscribe(response => {
             console.log(response);
       }, err => {
          console.log("User authentication failed!");
       });