[네이버 부스트코스 웹 프로그래밍] Ajax, CORS, Visual Studio Code Live Server Extension

https://www.edwith.org/boostcourse-web/lecture/16701/

[LECTURE] 4) Ajax통신의 이해 : edwith

 

Ajax: Asynchronous JavaScript and XML

넓은 의미의 Ajax는 웹 클라이언트 측에서 페이지 새로고침 없이 비동기적으로 콘텐츠를 변경하기 위해 사용하는 기술

좁은 의미의 Ajax는 서버 측과 비동기적으로 통신하는 기술

XMLHttpRequest를 이용한 표준 방법 (참고: 이름과 달리 http외 프로토콜 이용 가능, xml외 json(일반적), html, txt 등 가능)

function ajax(data) {
 var oReq = new XMLHttpRequest(); //객체 생성
 oReq.addEventListener("load", function() { //이벤트 리스너 생성, 서버에서 응답이 오면 load이벤트 발생
   console.log(this.responseText); //비동기적으로 콜백함수 실행
 });    
 oReq.open("GET", "http://www.example.org/getData?data=data"); //요청, parameter를 붙여서 보낼수있음. 
 oReq.send(); //전송
}

 

MDN의 예제

function reqListener () {
  console.log(this.responseText);
}

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "http://www.example.org/example.txt");
oReq.send();

example.org 페이지에서 콘솔을 열어 실행하면 404 에러가 뜬다. 

VM35:8 GET http://www.example.org/example.txt 404 (Not Found)

다른 페이지에서 콘솔을 열어 실행하면 다음과 같은 에러가 뜬다.

Access to XMLHttpRequest at 'https://www.example.org/example.txt' from origin 'https://developer.mozilla.org' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

CORS란 무엇인가? 

 

본문 내용: https://huns.me/posts/2014-04-20-ajax-cors-overview

CORS: Cross-Origin Resource Sharing

XMLHttpRequest 객체는 동일 출처 정책(SOP, Same Origin Policy)의 제약을 받는다. 이 정책은 한 도메인의 JavaScript 코드를 불러오면 그 코드에서 다른 도메인의 데이터를 요청할 수 없다는 것을 의미한다. 당시에는 보안상 필요한 제약이었으나 오늘날 클라이언트와 서버가 Ajax로 데이터를 주고받는 형태의 웹애플리케이션이 일반화되면서 여러 가지 우회법이 나왔다. 거기에 대한 논의는 아래 참고 글에서 확인하고, W3C가 이런 크로스 도메인 이슈를 해결하는 표준 명세를 만든 것이 현재의 CORS다.

기존 데이터에 사이드 이펙트를 일으키지 않는 GET, HEAD, POST(Content-Type: application/x-www-form-urlencoded, multipart/form-data, text/plain 중 하나인 경우) 요청은 커스텀 헤더를 지정하지 않으나, 그 이외 메소드를 이용한 요청은 preflight요청을 먼저 서버로 전송해야 한다.

서버의 응답 헤더에서 Access-Control-~ 에 허용 정보가 담겨 있다.

• Access-Control-Allow-Origin : 허용하는 Origin
• Access-Control-Request-Methods : 허용하는 요청 메소드
• Access-Control-Allow-Headers : 허용하는 헤더 속성
• Access-Control-Max-Age : preflight request 캐시하는 시간(초 단위)

 

Visual Studio Code Live Server Extension을 활용한 실습

VScode를 실행하여 Live Server 익스텐션을 설치한다.

html파일을 우클릭해 Open with Live Server 항목을 선택한다.

해당 주소를 복사해 예제를 실행한다.

정상적으로 실행되는 것을 확인할 수 있다.

 

 

참고:

도움이 아주 많이 된 훌륭한 글: https://huns.me/posts/2014-04-20-ajax-cors-overview

AJAX & CORS Overview

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS)

https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

XMLHttpRequest 사용하기