nakka soft world !
Cross Domain 본문
Ajax를 공부 하던중 아래 Code를 돌리니 에러가 발생함.
Chrome Inspector에서 확인된 Error 문구 XMLHttpRequest cannot load file:///D:/%EA%B0%9C%EC%9D%B8%EC%9E%90%EB%A3%8C/JavaScript/doWorkExample/samplexml.xml. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. |
이유는 Java Script의 Cross Domain정책에 위배 되기 때문.
Cross Domain 이란... 읽으면 크로스 도메인. Java Script 보안정책중 하나인 Same-Origin Policy정책이 있는데, 이 부분을 어기는 것이 바로 Cross Domain이다. 즉 Domain이 서로 다른 곳에서 Java Script로 접근 하거나 Ajax가 접근하는 결과가 다른 Domain에 있는 경우 보아을 사유로 접근을 막아 버린다. 즉, 브라우저의 Bug도, 우리의 Code의 Bug도, 회사 내부 보안 정책의 문제도 아닌 Java Script 정책상 위배된 것이다. Java Script는 원칙적으로 동일 Domain내에서만 작동하는 것을 원칙으로 하며, 이것을 Same-Origin Policy, Sand Box정책이라 부른다. |
이 Cross Domain문제를 겪는 개발자가 하나가 아니기때문에 누군가가 이를 위한 Plug In을 만들어 놓았다.
아래 경로에 가면 다른 개발자가 해결방법과 관련 Plug In을 올려 두었다. 이를 참고 하니 정상 동작하는 것을 보았다.
http://www.isgoodstuff.com/2012/07/22/cross-domain-xml-using-jquery/
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>XML TEST</title>
<style type ="text/css">
span.normal{
font-weight:bold;
border:thin solid #000000;
padding:5px;
background-color:#FF0000;
}
span.mouseover{
font-weight:bold;
border:thin solid #000000;
padding:5px;
background-color:#EEEEEE;
}
</style>
<script type="text/javascript">
var request = null;
var ajaxreq = null;
function httpRequest(){
if(window.XMLHttpRequest){
try{
request = new XMLHttpRequest();
}catch(e){
request = null;
}
}else if(window.ActiveXObject){
//* IE
try{
request = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
//* Old Version IE
try{
request = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
request = null;
}
}
}
request.onreadystatechange = function(){
if(request.readyState == 4 && request.status == 200){
var xmlData = request.getReaponseXML().getElementById("helpMsg");
var entries = xmlData.getElementByTagName("rawurl");
}
}
}
function callRequest(){
httpRequest();
request.open("POST", "samplexml.xml", true);
request.send();
}
</script>
</head>
<body>
<input type="button" name="myname" onClick="callRequest()" value="XmlHttpRequest Send">
</body>
</html>