解決：角4.3 HTTPClient基本授權不起作用

Question

我試圖使用新發布的HttpClient在Angular 4實施基本授權。

我在嘗試連接到在Tomcat上運行的Spring應用程序，並在其中暴露了REST API。

我在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：

然而，後調用仍然失敗。

在服務器端，我的代碼是：

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：

如何進行？

---

更新2：它的工作：

我不得不做這兩個步驟：

1）我不得不把headers線改變什麼，我在更新1那樣，因爲HttpHeaders是不可改變的。

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

2）現在，根據您的需要，你有兩個選擇：

一）使用代理作爲解釋here解決CORS問題不改變你的服務器端。

b）按照here的說明更新服務器端，並在下面的一些答案中更改彈簧配置。

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回購樣品演示 spring mvc with angular2/4

Answer 3

使用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!"); 
     });