양식 5를 각도 5로 게시하기

스프링 백엔드와 각도 5 프론트 엔드를 사용하여 응용 프로그램을 개발하려고합니다. 로그인을 위해 나는 스프링 보안을 사용하고 프론트 엔드에서 로그인 데이터를 x-www-form-urlencoded으로 게시하려고합니다. 그러나 백엔드는 사용자 이름과 암호 모두에 대해 null을받습니다. HttpClient의 Angular 5 문서는 json 데이터 게시 전용 예제이며 Http은 더 이상 사용되지 않습니다.양식 5를 각도 5로 게시하기

이 문제를 해결하는 방법에 대한 제안은 크게 감사하겠습니다.

constructor(public httpClient: HttpClient) { 
    console.log('Hello RestService Provider'); 
} 

login(username: string, password: string) { 
    var body = 'username=' + username + '&password=' + password + "&remember-me=" + false; 
    var headers = new HttpHeaders(); 
    headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8'); 
    let options = {headers: headers, withCredentials: true}; 
    this.callPostWithOptions("login", body, options).then(data=>{ 
     this.getCurrentUser(); 
    }); 
} 

callPostWithOptions(address, body, options) { 
    return new Promise(resolve => { 
     address = this._SERVER_HOST + ":" + this._SERVER_PORT + "/" + address; 
     this.httpClient.post(address, body, options) 
     .subscribe((data) => { 
      resolve(data); 
      }, 
      (err) => { 
      console.log("error during POST", err) 
      }); 
    }); 
}

그리고 서버 엔드 포인트 :

@RequestMapping(value = "/login", method = RequestMethod.GET) 
@CrossOrigin(origins = "*") 
public ModelAndView handle() { 
    return new ModelAndView("/app/userOverview"); 
}

편집 : 여기

내 각도 코드 나는 우체부로를 테스트 할 때이 문제

없이 작동, 언급하는 것을 잊었다

출처

2017-11-16 Irina Avram

는 서버의 엔드 포인트를 표시 할 수 있습니다하십시오 (!) 참고로

let headers = new HttpHeaders(); headers = headers.append('...','...');

을, 나는이 toPromise() operator 사용 callPostWithOptions을 변경 것인가? –

나는 그것을 추가했지만, 주로 스프링 보안 –

2 질문 : (1) 요청에 Access-Control-Allow-Origin 헤더를 추가하는 이유는 무엇입니까? 이것은 서버에서 브라우저로 전송되어야하는 [응답 헤더] (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/AccessControl-Allow-Origin)입니다. (2)'callPostWithOptions'를 호출하고 두 번째 인수'urlSearchParams'를 제공하십시오. 그게 어디서 온거야? 코드에 더 많은 문제가 있습니다. 예를 들어,'headers.append()'는 새로운 객체를 반환하지만 기존 객체를 수정한다고 생각합니다. – BeetleJuice

새로운 HTTPClient 모듈은 변경 불가능한 유형에서만 작동합니다. 이는 헤더와 매개 변수를 수정할 수 없음을 의미합니다. append() 작업은 실제로 헤더가 추가 된 원본 복사본을 반환합니다.

let headers = new HttpHeaders(); 
headers.append('...','...');// <- doesn't change the original object, but creates a new one!

대신, 반환 된 개체 캡처 할 :

callPostWithOptions(address, body, options) { 
    address = '...'; 
    return this.httpClient.post(address, body, options).toPromise(); 
}

출처

2017-11-16 16:12:31 BeetleJuice

양식 5를 각도 5로 게시하기

답변

관련 문제