CORS 테스트 방법

원본 출처 : https://medium.com/pareture/simple-local-cors-test-tool-544f108311c5

Simple Local CORS test tool

 

CORS 란?

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Cross-Origin Resource Sharing (CORS) - HTTP | MDN

 

준비물

https://github.com/njgibbon/nicks-cors-test

GitHub - njgibbon/nicks-cors-test: Simple HTML & JS Tool to quickly test CORS locally.

 

위 사이트(Github)에서 파일들을 다운로드 받습니다. 

 

브라우저를 이용하여 다운 받은 index.html 파일을 열고 '개발자 도구'(F12) 도 실행합니다.  

 

main.js 파일을 텍스트 에디터(Visual Studio Code, Notepad++, Vi, 메모장 등)으로 열어서 

url 부분을 "https://google.com" 으로 변경한 다음,

브라우저를 새로고침(Refresh) 하면 '개발자 도구' 의 '콘솔(Console)' 부분에 에러가 나는 것을 확인할 수 있습니다.

function main()

{

    console.log("nicks-cors-test");

    $.ajax

    ({

        url: "https://google.com",

        success: function(data)

        {

            console.log(data);

        }

    });

}

 

url 부분을 다시 https://api.github.com 으로 수정한 다음 '새로고침' 하면 에러가 나지 않는 것을 확인할 수 있습니다. 

function main()

{

    console.log("nicks-cors-test");

    $.ajax

    ({

        url: "https://api.github.com",

        success: function(data)

        {

            console.log(data);

        }

    });

}

 

 

이렇게 url 을 CORS 테스트를 진행하고자 하는 주소로 변경한 다음 

브라우저를 '새로 고침' 하면 CORS 설정 상태를 확인할 수 있습니다.