2012-03-04 4 views
38

크로스 원본 도메인을 보내고 사용자 지정'인증 '헤더를 추가하려고합니다. 아래 코드를 참조하십시오.cross-origin 'Authorization'-header with jquery.ajax()

오류 :

XMLHttpRequest의는 {URL}을 (를)로드 할 수 없습니다. 요청 헤더 필드 권한 부여는 Access-Control-Allow-Headers에서 허용되지 않습니다.

function loadJson(from, to) { 
    $.ajax({ 
     //this is a 'cross-origin' domain 
     url : "http://localhost:2180/api/index.php", 
     dataType : 'json', 
     data : { handler : "statistic", from : from, to : to 
     }, 
     beforeSend : setHeader, 
     success : function(data) { 
      alert("success"); 
     }, 
     error : function(jqXHR, textStatus, errorThrown) { 
      alert("error"); 
     } 
    }); 
} 

function getToken() { 
    var cookie = Cookie.getCookie(cookieName); 
    var auth = jQuery.parseJSON(cookie); 
    var token = "Token " + auth.id + ":" + auth.key; 
} 

function setHeader(xhr) { 
    xhr.setRequestHeader('Authorization', getToken()); 
} 

는 또한 시도 : 아약스 요청

headers : { 'Authorization' : getToken() }, 

.

jquery-ajax 프레임 워크가 교차 출처 인증을 차단할 수 있습니까? 이 문제를 어떻게 해결할 수 있습니까?

업데이트 : 쿠키에 다음 클라이언트 측에 auth.key을 저장하는 안전한 방법이있다 : 그런데

? getToken()은 몸체, 날짜 등을 해시하는보다 복잡한 메소드로 대체됩니다.

+1

'getToken()'메소드는 아무 것도 반환하지 않습니다. – istepaniuk

답변

61

이것은 CORS 요청을 작성하는 예입니다. 서버에 액세스 할 수 있으면 (로컬 호스트에 대한 요청이므로 사용자가 수행한다고 가정 함) CORS 관련 응답 헤더를 추가해야합니다. 가장 간단한 방법은 다음과 같은 응답 헤더를 추가하는 것입니다.

Access-Control-Allow-Origin: * 
Access-Control-Allow-Methods: GET, POST, PUT, DELETE 
Access-Control-Allow-Headers: Authorization 

또한 HTTP OPTIONS 요청에 응답하도록 서버를 구성해야합니다. CORS 요청에 대한 자세한 내용은 여기를 참조하십시오. http://www.html5rocks.com/en/tutorials/cors/

+3

음 .. 나는이 세 개의 헤더 중 마지막 부분을 잊어 버렸다. 나는 단지 원점과 방법을 보내고 있었다. 멍청한 실수. :) 예, OPTIONS을 구현했습니다. 좋은 링크! thanks –

+0

MDN에 따르면 와일드 카드 대신 인증 된 요청을 사용할 때 Access-Control-Allow-Origin 헤더를 원본으로 설정해야합니다. – radicalmatt

+0

@ radicalmatt, 네, 그는 그것을 거기에 썼습니다. http://stackoverflow.com/a/15254158/632951 : * "Access Control-Allow-Origin 헤더에 값'*'을 사용할 수 없습니다. Allow-Credentials true "* – Pacerier