웹 API에서 각도 Bearer 인증을 계속 실패

Question

Angular 5 및 Web API 버전의 새 응용 프로그램에서 작업하는 것은 dot net framework 4.6.1에서 5.2.3입니다. 이 API는 VS2017에서 개인 인증을 사용하는 새로운 웹 API 프로젝트입니다. API의 유일한 변경 사항은 Cors 라이브러리가 추가 된 Startup.Auth.cs의 다음 줄에 cors를 허용하는 것입니다.

app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll); 

각도 앱 로그인에서

및 등록이 작동되지만 같은 API/계정/로그 아웃 등의 엔드 포인트를 포함하여 웹 API를 호출 할 때 권한을 부여 할 수 없다.

이 오류로 계속 실패합니다. 오류가 없습니다.

이 요청에 대한 승인이 거부되었습니다.

각도 코드.

var token = localStorage.getItem("accessToken"); 
let headers = new HttpHeaders(); 
headers.set('Authorization', 'Bearer ' + token); 

this._http.post(environment.authApiUrl + 'api/Account/Logout', { headers: headers}).subscribe(
    data => { 
    localStorage.removeItem("userName"); 
    localStorage.removeItem("accessToken"); 

    this.isLoggedin = false;   
    this._router.navigate(['/home']); 
    }, 
    errors => console.log(errors) 
); 

내가 뭘 잘못했는지 생각할 수 없어서 jquery에서 다시 작성하려고했습니다. 매력처럼 작동합니다. Api는 전혀 변경되지 않았습니다. Angular에서 내가 뭘 잘못하고 있니?

Answer 1

하는 경우 전면 및 백엔드 모두 동일한 URL에

일 코드에서 헤더를 검사한다면 실제로 전송되지 않았 음을 알 수 있습니다. HttpHeaders의 설명 Docs 주 : HTTP 헤더

불변 세트.

그래서 이전 헤더 (Http)의 차이는, 당신은 할 수 : 또는

let headers = new HttpHeaders() 
    .set('Authorization', 'Bearer ' + token) 

나 :

을

let headers = new Headers(); 
headers.set('Authorization', 'Bearer ' + token); 

지금 (HttpClient)은 당신이해야 할

because ...

HttpHeaders는 불변입니다 - 모든 돌연변이 작업이 새로운 인스턴스를 돌려줍니다.

Answer 2

죄송합니다. 다시 읽었으며 '오류가 없습니다'라는 메시지가 표시되므로 아래 답변을 무시하십시오.

올드 대답

내가 .. 하나가 다른 하나를 가져 XHR이 무엇인지 각도와 jQuery를 방법의 차이는 정확히 내가 생각 말할 수 있지만 나를 여기 꼼짝하지 않습니다.

비슷한 문제가 있었는데 '오류'오류가 발생했다는 것은 요청이 실제로 제대로 작동하지만 브라우저가 여기에서 당신을 보호하려고 시도한다는 것을 의미합니다. Angular가이 브라우저 메커니즘이 작동하고 jQuery가 작동하지 않는 기술을 사용한다는 강한 인상을받습니다.

긴 짧은 이야기 :

문제는 프론트 엔드의 URL이 백엔드와 다른 점이다. 귀하의 브라우저는 그것을 좋아하지 않으며 프리 플라이트 요청을합니다.

해결 방법 : 백엔드에 어느 설정 CORS

• , 또는
• 사용 JSONP 대신 https://angular.io/api/http/Jsonp, 또는