AJAX를 쉽게 이해하기 위해선 일단 서버가 무엇인지 알아야 한다.
서버
-
서버란 쉽게말하면 유저가 데이터를 요구하면 데이터를 보내주는 간단한 프로그램이다.
-
서버에게 데이터를 요구하려면 정해진 방법이 있고 그에 맞춰서 요구해야 한다.
(URL을 알아야하고 그 URL로 get요청을 해야한다.) -
하지만 get요청은 항상 새로고침된다. 그렇기 때문에 AJAX를 사용한다.
AJAX
-
AJAX란 Asynchronous JavaScript And XML 의 약자로 서버와 비동기적으로 데이터를 주고받는 자바스크립트 기술을 의미한다.
-
AJAX는 새로고침 없이 서버에게 get요청하는 js코드이다.
-
장점으로는 새로고침이 없으니 웹페이지 전환이 부드러워진다.
-
요청을 할수 있는 방법은 크게 3가지가 있는데
- 예전 방식
<script>
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function () {
};
if (this.readyState== 4 && this.status ==
}
console.log(ajax.responseText)
200) {
ajax.open("GET", "URL", true); ajax.send();
</script>- 요즘 방식
<script>
fetch('URL')
.then((response) => {
if (!response.ok) {
throw new Error('에러')
}
return response.json()
})
.then((결과) => {
console.log(결과)
})
.catch(() => {
console.log('에러')
})
</script>- 외부 라이브러리 방식 (axios 등)
<script>
axios.get('URL')
.then((result) => {
console.log(result.data)
})
.catch(() => {
console.log('에러')
})
</script>CORS
-
브라우저에서는 보안적인 이유로 cross-origin HTTP 요청들을 제한한다. 그래서 cross-origin 요청을 하려면 서버의 동의가 필요하다. 서버가 동의한다면 브라우저에서는 요청을 허락하고 동의하지 않는다면 브라우저에서 거절한다.
-
이런 허락을 구하고 거절하는 매커니즘을 HTTP-header를 이용해서 가능한데, 이를 CORS(Cross-Origin Resource Sharing) 라고 부른다.
-
cross-origin 이란 프로토콜, 도메인, 포트 중 하나라도 다른 경우를 말한다.
-
CORS가 필요한 이유는 CORS가 없이 모든곳에서 데이터를 요청할 수 있게 되면, 다른 사이트에서 원래 사이트를 흉내낼 수 있게 된다. 예를 들어 기존 사이트와 완전히 동일하게 동작하도록 하여 사용자가 로그인을 하게 만들고, 로그인했던 세션을 탈취하여 악의적으로 정보를 추출하거나 다른 사람의 정보를 입력하는 등의 공격을 할수 있다.
CORS는 아래와 같이 동작한다.
- Simple requests인 경우
-
서버로 요청을 한다.
-
서버의 응답이 왔을 때 브라우저가 요청한 Origin과 응답한 헤더 Access-Control-Request-Headers의 값을 비교하여 유효한 요청이라면 리소스를 응답한다. 만약 유효하지 않은 요청이라면 브라우저에서 이를 막고 에러가 발생한다.
- preflight 요청일 경우
-
Origin헤더에 현재 요청하는 origin과, Access-Control-Request-Method헤더에 요청하는 HTTP method와 Access-Control-Request-Headers요청 시 사용할 헤더를 OPTIONS 메서드로 서버로 요청한다. 이때 내용물은 없이 헤더만 전송한다.
-
브라우저가 서버에서 응답한 헤더를 보고 유효한 요청인지 확인한다. 만약 유효하지 않은 요청이라면 요청은 중단되고 에러가 발생한다. 만약 유효한 요청이라면 원래 요청으로 보내려던 요청을 다시 요청하여 리소스를 응답받는다.
Simple requests란?
- HTTP method가 다음 중 하나이면서
GET
HEAD
POST - 자동으로 설정되는 헤더는 제외하고, 설정할 수 있는 다음 헤더들만 변경하면서
Accept
Accept-Language
Content-Language - Content-Type이 다음과 같은 경우
application/x-www-form-urlencoded
multipart/form-data
text/plain
Simple requqets라고 부른다. 이 요청은 추가적으로 확인하지 않고 바로 본 요청을 보낸다.
preflight 요청이란?
- Simple requests가 아닌 cross-origin요청은 모두 preflight 요청을 하게 되는데, 실제 요청을 보내는 것이 안전한지 확인하기 위해 먼저 OPTIONS 메서드를 사용하여 cross-origin HTTP 요청을 보낸다.
- 이렇게 하는 이유는 사용자 데이터에 영향을 미칠 수 있는 요청이므로 사전에 확인 후 본 요청을 보낸다.
