이 세 번째 : 당신이 본 않았을 수 있습니다 옵션 간 리소스 공유 (CORS가) .
CORS 표준은 서버가 허용 된 오리진 도메인에 자원을 제공 할 수있는 새로운 HTTP 헤더를 추가하여 작동합니다. 브라우저는 이러한 헤더를 지원하고 설정 한 제한을 준수합니다.
예 : 사이트가 http://my-cool-site.com 이고 도메인 http://third-party-site.com에 타사 API가 있으며 AJAX를 통해 액세스 할 수 있다고 가정하십시오 .
그리고 my-cool-site.com의 서버 페이지가 third-party-site.com에 요청했다고 가정합니다. 일반적으로 사용자 브라우저는 동일 출처 보안 정책에 따라 자신의 도메인 / 하위 도메인 이외의 다른 사이트에 대한 AJAX 호출을 거부합니다 . 그러나 브라우저와 타사 서버가 CORS를 지원하면 다음과 같은 일이 발생합니다.
브라우저는 다음 HTTP 헤더를 third-party-site.com으로 보냅니다.
Origin: http://my-cool-site.com
타사 서버가 도메인의 요청을 수락하면 다음 HTTP 헤더로 응답합니다.
Access-Control-Allow-Origin: http://my-cool-site.com
모든 도메인을 허용하기 위해 타사 서버는 다음 헤더를 보낼 수 있습니다.
Access-Control-Allow-Origin: *
사이트가 허용되지 않으면 브라우저에 오류가 발생합니다.
클라이언트에 CORS를 지원하는 상당히 최신 브라우저가 있고 타사 서버도 CORS 를 지원 하는 경우 코드를 약간만 변경하여 사용할 수 있습니다.
내가 발견 CORS에 좋은 설명 : 당신은이 작업을 수행하는 다른 방법을 찾을 수있는, JSONP를 . 그러나 JSONP는 코드를 상당히 변경해야합니다.
CORS 요청을하려면 XMLHttpRequest
Firefox 3.5 이상, Safari 4 이상 및 Chrome XDomainRequest
에서 사용하고 IE8 이상에서 개체를 사용하면됩니다. XMLHttpRequest
객체를 사용할 때 브라우저가 도메인 간 요청을 시도하는 것을 발견하면 CORS 동작을 원활하게 트리거합니다.
다음은 크로스 브라우저 CORS 오브젝트를 작성하는 데 도움이되는 Javascript 함수입니다.
function createCORSRequest(method, url){
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr){
// XHR has 'withCredentials' property only if it supports CORS
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined"){ // if IE use XDR
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
xhr = null;
}
return xhr;
}
"대부분의 브라우저가 도메인 간 XML 사용을 잠갔습니다"라고 말했기 때문에 타사 서버가 CORS를 지원하지 않을 수 있습니다. 그런 다음 다른 방법을 찾아야합니다.