2014-12-01 3 views
0

사용자를 환영하는 다음 html 페이지가 있습니다. 일단/ajax 호출을 통해 한 번 등록한 다음/login을 한 번 호출하려고합니다. 그러나이 페이지가 렌더링 될 때 버튼을 클릭해도 아무런 변화가 없으며 showdata() 및 reg_user() 함수도 호출되지 않습니다. 무엇이 문제 일 수 있습니까? Chrome 개발자 도구에서 다음과 같이 말합니다.같은 html 페이지에서 여러 개의 ajax 호출을 만드는 방법은 무엇입니까?

XMLHttpRequest에서 https : //127.0.0.1/login을로드 할 수 없습니다. 아니요 요청한 리소스에 'Access-Control-Allow-Origin'헤더가 있습니다. 따라서 'http : //127.0.0.1'은 액세스가 허용되지 않습니다.

하지만 크로스 도메인 통화를하고 있지 않습니다. 결국 동일한 localhost 도메인을 호출합니다. 무슨 일이 일어나는지 밝혀주세요. 나는 서버

<html> 
<title> Welcome </title> 
<script> 
function makeRequestObject(){ 
    var xmlhttp=false; 
    try { 
     xmlhttp = new ActiveXObject('Msxml2.XMLHTTP'); 
    } catch (e) { 
     try { 
     xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); 
     } catch (E) { 
     xmlhttp = false; 
     } 
    } 
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') { 
     xmlhttp = new XMLHttpRequest(); 
    } 
    return xmlhttp; 
} 

function showdata() 
{ 
    alert("show data called"); 
    var xmlhttp=makeRequestObject(); 
    var user=document.getElementById('user_name').value; 
    var pass=document.getElementById('password').value; 
    var url = 'https://127.0.0.1/login'; 
    var params = 'uname='+user+'&'+'pass='+pass; 

    xmlhttp.open('POST', url, true); 
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 

    xmlhttp.onreadystatechange=function() { 
     if (xmlhttp.readyState==4 && xmlhttp.status == 200) { 
     var content = xmlhttp.responseText; 
     if(content){ 
      document.getElementById('userdiv').innerHTML = content; 
     } 
     } 
    } 
    xmlhttp.send(params); 
} 
function reg_user() 
{ 
    alert("reg_user called"); 
    var xmlhttp=makeRequestObject(); 
    var user=document.getElementById('reg_username').value; 
    var pass=document.getElementById('reg_password').value; 
    var url = 'https://127.0.0.1/register'; 
    var params = 'uname='+user+'&'+'pass='+pass; 

    xmlhttp.open('POST', url, true); 
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"$ 

    xmlhttp.onreadystatechange=function() { 
     if (xmlhttp.readyState==4 && xmlhttp.status == 200) { 
     var content = xmlhttp.responseText; 
     if(content){ 
      document.getElementById('regdiv').innerHTML = content; 
     } 
     } 
    } 
    xmlhttp.send(params); 
} 
</script> 
<body> 
Enter user name : <input type="text" id="user_name" /><br/> 
Enter your password : <input type="text" id="password"/><br/> 
<input type="button" onclick="showdata()" value="Submit"><br/><br/> 
<div id="userdiv"> 
</div> 
<br /> 
Registration 
<br /> 
Enter user name: <input type="text" id="reg_username" /><br/> 
Enter your password : <input type="text" id="reg_password"/><br/> 
<input type="button" onclick="reg_user()" value="Submit"><br/><br/> 
<div id="regdiv"> 
</div> 
</body> 
</html> 
+2

자신의 롤링 대신 AJAX를 수행하기 위해 자바 스크립트 라이브러리를 사용하는 것이 좋습니다. – GordonM

+0

이것을 고려해 보겠습니다. jquery –

답변

1

당신이 CORS 검증에 의해 발생 받고있는 오류에 아파치/우분투/PHP를 실행 해하고있다. 서버 https://127.0.0.1/이 CORS 사양에 따라 적절한 HTTP 응답 헤더를 설정하는지 확인하십시오.

+0

을 사용하여 여러 개의 ajax 호출을 호출하는 작은 예제를 제공 할 수 있습니까? 그러나 다른 도메인에 액세스하지는 않습니다. 다른 도메인에 액세스하는 경우에만 문제가됩니다. 동일한 도메인이지만 다른 API 경로가 –

+0

도 있습니다.이 옵션을 활성화하면 사이트의 https 보안에 영향을 미치지 않습니까? –

+1

다른 "사이트"(다른 포트)로 간주되는 http에서 https로 전화를 겁니다. 오류 메시지 : "https : //127.0.0.1/login 아니요 'Access-Control-Allow-Origin'헤더가 요청 된 리소스에 있습니다. 원본 'http : //127.0.0.1'" –

관련 문제