[SPRING] 각도 4.3 HTTPClient 기본 인증 작동하지 않음

각도 4.3 HTTPClient 기본 인증 작동하지 않음

새로 출시 된 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 도구의 네트워크 탭에서 가져온 것입니다.

내가 뭘 잘못하고 있죠 ? 이 작품을 어떻게 만들 수 있습니까?

업데이트 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
}

전화는 결코 내 물건을 다룰 수 없다. authCredentials가 null입니다.

이것은 크롬에서 온 것입니다.

진행 방법?

해결법

1. ==============================

   1.HttpHeaders는 변경되지 않으므로 각 호출의 headers 객체를 재정의하기 위해 함수의 결과를 할당해야합니다.

   HttpHeaders는 변경되지 않으므로 각 호출의 headers 객체를 재정의하기 위해 함수의 결과를 할당해야합니다.

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

   출처 : 각도 문서

2. ==============================

   2.안녕하세요 귀하의 백엔드 구성 할 수 있습니다.

   안녕하세요 귀하의 백엔드 구성 할 수 있습니다.

   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");
   

   github repo 샘플 데모를 확인할 수도 있습니다 각도 2/4의 봄 mvc

3. ==============================

   3.RequestOptions를 사용하여 게시물 요청에 헤더를 설정하십시오.

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

from https://stackoverflow.com/questions/45894628/angular-4-3-httpclient-basic-authorization-not-working by cc-by-sa and MIT license