Ajax 질문

안녕하세요 Ajax을 처음 접어드는 단계인 초보입니다.

교제(책)을 보고 첫 예제를 이용해서 코드를 작성해 보았는데.

문제의 코드 -

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Ajax</title>

<script>

    function getFromServer() {

        var req;

        if (window.XMLHttpRequest) {

            req = new XMLHttpRequest();

        }

        else {

            req = new ActiveXObject('Microsoft.XMLHTTP');

        }

        req.onreadystatechange = function () {

            if (req.readyState == 4 && req.status == 200) {

                document.getElementById('target').innerHTML = req.responseText;

            }

        }

        req.open('GET' , 'testfile.txt' , true);

        req.send();

    }

</script>
<div id="target" style="width: 300px; height: 300px; border: solid 1px black;">

</div>

<button type="button" onclick="getFromServer()">GET DATA</button>

“Access to XMLHttpRequest at ‘file:///C:/Jhin_Project/javaScript/JQuery/testfile.txt’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.”

…이라는 오류가 개발자 도구에서 발견되는데 구글링 결과 크로스도메인 요청이라고 검색되는데

Ajax자체를 처음 접해보는 저로써는 뭐가 문제인지 모르겠습니다 ㅠ;

그리고 Ajax으로 불러올 항목으로 “testfile.txt” 이라는 파일을 작성해서 사용할 생각이였는데

ajax.html:22 GET file:///C:/Jhin_Project/javaScript/JQuery/testfile.txt net::ERR_FAILED

…이 라면서 가져올수 없다는데 이건 경로 문제인가요?

Ajax문제 자체를 잘모르겠습니다…ㅠ

대부분의 브라우저에서 보안상 다른 domain으로의 XMLHttpRequest가 기본적으로 차단되어 있습니다. 이를 허용하려면 Ajax로 인해 불러지는 대상이 되는 서버에서 CORS 설정을 해줘야합니다.

그리고 로컬에서 작업을 할때라도 file:// 로 접근 하기보다는 테스트를 위한 서버를 띄우고 그 로컬 서버에 접속하는 형태로 작업하길 권장합니다.
다음과 같은 도구를 이용하면 쉽게 특정 폴더를 로컬 웹서버로 제공이 가능합니다.

1 Like

감사합니다. 군대 싸지방 이용중이라 서버 이용이 불가능하지만 휴가나가서 열심히 해보겠습니다!
감사합니다!