각도 4, XHR로드 할 수 없습니다 : POST

나는 백엔드 서비스 인증 기반의 토큰을 개발하기 위해이 문서를 따라했습니다 http://bitoftech.net/2014/06/01/token-based-authentication-asp-net-web-api-2-owin-asp-net-identity/각도 4, XHR로드 할 수 없습니다 : POST

등이 모든 작품

예상 나는 윈폼 응용 프로그램을 사용하여 인증 할 수 있습니다 C#에서 restsharp를 사용하여 토큰을 검색하는 데는 아무런 문제가 없습니다. 지금은 각도 (4)를 사용하여 웹 프론트 엔드를 개발하기 위해 왔어요이 수정하려고 :

login(username: string, password: string): Observable<boolean> { 
 

 
     let data = "grant_type=password&username=" + username + "&password=" + password; 
 

 
     let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' }); 
 
     //headers.append('Accept', 'application/json'); 
 

 
     let options = new RequestOptions({headers: headers}); 
 

 
     return this.http.post('http://localhost:61814/token', data, options) 
 
     .map((response: Response) => { 
 
      // login successful if there's a jwt token in the response 
 
      let user = response.json(); 
 
      if (user && user.token) { 
 
       // store user details and jwt token in local storage to keep user logged in between page refreshes 
 
       localStorage.setItem('currentUser', JSON.stringify(user)); 
 
      } 
 
     
 
      return user; 
 
     }) 
 
     
 
    }

http://jasonwatmore.com/post/2016/08/16/angular-2-jwt-authentication-example-tutorial

이 코드를 사용하여 내 백 엔드에서 토큰을 얻기 위해

login() { 
 
     this.loading = true; 
 
     this.authenticationService.login(this.model.username, this.model.password) 
 
      .subscribe(
 
       data => { 
 
        this.router.navigate([this.returnUrl]); 
 
       }, 
 
       error => { 
 
        this.alertService.error(error); 
 
        this.loading = false; 
 
       }); 
 
    }

하지만 Chrome devtools에서 디버깅 할 때 아무런 반응이없고 네트워크 탭에는 아무 것도없고 XHR로드가 실패했습니다 : 콘솔의 "POST".

프런트 엔드 개발에 상당히 익숙하며 정말 고민 중입니다!

출처

2017-10-20 paparoacho

그것은 나에게 잘 보인다. console.log를 다양한 메소드에 넣으면 모두 호출되는 것입니까? – Joe

예, 이제 있습니다. 백 엔드 솔루션을 다시 시작했는데 제대로 작동하는 것 같습니다. 투쟁! 감사 – paparoacho

당신의 백엔드 프로젝트이 HTTP에서 실행되는 별도의 프로젝트 및 API 프로젝트 인 경우 : \ 로컬 호스트 : 61,814하고 프론트 엔드 프로젝트이 HTTP에서 실행되는 각 프로젝트입니다 : \ 로컬 호스트 : 4200, 이 파일에 영향을 미치는 위해 다음

{ 
    "/api/*": { 
     "target": "http://localhost:61814", 
     "secure": false, 
     "logLevel": "debug" 
    } 
}

과 : 귀하의 문제는 당신이 코드 내에서 각 프로젝트 내부 proxy.config.json을 넣어 있어야이 문제에 대한 간 리소스 공유 (CORS)입니다 (NG가 역할을 대신) anular 프로젝트 사용을

NPM 시작을 실행하기위한 각 프로젝트에

출처

2017-10-20 22:01:01

각도 4, XHR로드 할 수 없습니다 : POST

답변

관련 문제