AngularJS에서 HTTP Basic Auth 헤더를 설정할 수 없음

Question

Angular JS를 사용하여 HTTP Basic Auth를 테스트하기 위해 다음 컨트롤러를 작성했습니다.

function TestCtrl($scope, $http, Base64){ 
    $http.defaults.headers.common.Authorization = 'Basic ' + Base64.encode('admin:secret'); 
    $http.jsonp('http://localhost:5000/test'+'/?callback=JSON_CALLBACK', {query:{isArray:true }}). 
    then(function (response) { 
     $scope.test = response.data; 
    }); 
} 

내가 console.log($http.defaults.headers) 일 때 헤더가 설정되어 있습니다. 하지만 Firefox에서 Chrome 개발자 툴바 또는 Firebug를 사용하여 요청 헤더를 확인할 때 Authorization 헤더가 표시되지 않습니다.

요청을 수신하는 서버가 Authorization 헤더를받지 못합니다.

내가 뭘 잘못하고있어?

Answer 1

대답은 입니다. "예, 정규 AJAX 요청의 경우 적절한 인증 헤더를 설정할 수 있어야합니다".

그러나 예를 기반으로 JSONP를 사용하면 이 "아니요"으로 변경되며 표준 XHR 호출을하지 않습니다.

JSONP를 사용하여 붙어 있어도 인증 헤더를 보낼 수 없다고 생각합니다. JSONP는 Angular의 $http.get과 같은 기능을 수행하지 않습니다.

자세한 내용은 http://schock.net/articles/2013/02/05/how-jsonp-really-works-examples/을 참조하십시오. 그러나 짧은 버전은 JSONP가 일부 데이터를 가져 오는 <script> 태그를 집어 넣습니다. 반환 된 데이터는 서버에서 제공하는 데이터를 제공하여 사용자가 제공 한 기능 (예제에서는 JSON_CALLBACK)을 호출합니다. 따라서 헤더를 변경할 수 없습니다. 요청은 브라우저의 위치 표시 줄에 스크립트 태그의 URL을 붙여 넣은 것처럼 HTTP GET 요청입니다.

Answer 2

JJ가 완벽하게 대답했습니다.

해당 브라우징에 대한 자세한 내용을 보려면 기본 인증 헤더를 전달하기 만하면 URL 앞부분에 사용자 이름과 비밀번호를 간단하게 입력 할 수 있습니다. 그러면 헤더가 전송됩니다. 비밀 사용자 이름과 같은 : 비밀번호 변경 :

http://localhost:5000 

에 다음 URL 및 admin으로 로컬 호스트를 사용하여 예를 들어

,

http://admin:secret@localhost:5000 

참고 : @OliBlogger은 지적했다 최신 버전의 Chrome은 더 이상이 기능을 지원하지 않습니다. 실제 Chrome 상태 업데이트에 대한 링크에 대한 주석을 확인하십시오.