jQuery XML 오류: "요청한 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다."

jQuery를 사용하여 다른 도메인에 있는 XML 파일에 액세스하면 "요청한 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다."라는 오류 메시지가 나타날 수 있습니다. 이 오류는 교차 출처 AJAX 호출을 제한하는 동일 출처 정책으로 인해 발생합니다.

동일 출처 정책 이해

동일 출처 정책은 다음을 시행합니다. 웹 브라우저는 요청을 수행하는 HTML 페이지와 동일한 도메인에서 호스팅되는 서비스에 대한 AJAX 호출만 허용합니다. 주어진 예에서 HTML 페이지는 http://run.jsbin.com/에서 호스팅되는 반면 XML 파일은 http://www.ecb.europa.eu/에 위치하므로 다음과 같은 교차 출처 요청이 발생합니다. 브라우저에 의해 차단됩니다.

CORS(교차 원본 요청) 활성화

교차 원본 요청을 허용하려면 서버가 응답에 적절한 헤더를 포함해야 합니다. 이러한 헤더 중 하나는 리소스에 액세스하도록 허용된 원본을 지정하는 Access-Control-Allow-Origin 헤더입니다.

XML 파일의 경우 ECB 서버는 필요한 CORS를 제공하지 않습니다. 헤더이므로 오류 메시지가 나타납니다. 이 문제를 해결하려면 다음 헤더를 포함하도록 서버를 구성해야 합니다:

Access-Control-Allow-Origin: http://run.jsbin.com
Access-Control-Allow-Methods: GET
Access-Control-Allow-Headers: Content-Type

실행 전 요청에 대한 참고 사항

간단하지 않은 헤더로 POST 요청을 하는 경우와 같은 특정 경우에는 브라우저는 서버가 특정 요청에 대해 CORS를 지원하는지 여부를 확인하기 위해 OPTIONS 실행 전 요청을 수행할 수 있습니다. 이 실행 전 요청에 대한 서버의 응답에 적절한 CORS 헤더가 포함되어 있지 않으면 기본 요청이 동일한 오류 메시지와 함께 실패합니다. 따라서 실행 전 요청과 기본 요청 모두에 대한 응답에 필요한 헤더를 포함하는 것이 중요합니다.