2022. 6. 8. 08:41ㆍ카테고리 없음
Ajax (Asynchronous JavaScript and XML)
JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML데이터를 주고 받는 기술
(비동기식이란 웹페이지를 리로드하지 않고도 데이터를 불러오는 방식으로, 서버와 통신하는 동안 다른 작업을 할 수 있다. 즉, Ajax은 새로고침없이 갱신할 수 있는 기술)
요즘은 XML 보다 JSON을 더 많이 사용하는 추세다.
AJAX 장점
1. 웹페이지의 속도향상 서버의 처리가 완료될 때까지 기다리지 않고 처리가 가능하다.(새로고침안해도 되니깐)
2.서버에서 Data만 전송하면 되므로 전체적인 코드의 양이 줄어든다.(해당 데이터만 주고 받고 할 수 있으니깐)
3.기존 웹에서는 불가능했던 다양한 UI를 가능하게 해 준다.
AJAX 단점
1. 히스토리관리가되지 않는다.
2.페이지 이동없는 통신으로 인한 보안상의 문제가 있다.
3. 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
4. XML Http Request를 통해 통신하는 경우, 사용자에게 아무런 진행 정보가 주어지지 않는다.
(요청이 완료되지 않았는데 사용자가페이지를떠나거나오 작동할 우려가 발생하게 된다.)
........http 기능, 지원하는 Charset이 한정 등등
교차 출처 리소스 공유 (CORS)
내용 출처: 교차 출처 리소스 공유 (CORS) - HTTP | MDN (mozilla.org)
교차 출처 리소스 공유 (CORS) - HTTP | MDN
교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라
developer.mozilla.org
추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제다.
이런 빨간 화면이 뜨면 CORS 정책위반으로 인해 에러가 나는 거라고 보면 되는데, 이런 창이 뜨는 의미는 CORS를 허용해서 아무 탈 없이 다른 출처 리소스 공유를 해달라는 권고사항 같은 것이라 생각하면 된다.
CORS가 동작하는 방식은 3가지 시나리오에 따라 작동한다.
1. 예비요청 : 본 요청을 보내기 전에 브라우저 스스로 안전한 요청인지 확인.
브라우저는 요청을 한번에 보내지 않고, 예비요청과 본요청으로 나누어 서버에 전달하는데
이때 브라우저가 예비요청을 보내는 것을 Preflight라고 하고 이 예비요청의 메소드에는 Options이 사용된다.
2. 단순요청 : 단순요청은 예비요청을 보내지 않고 바로 서버에 본 요청을 한 후, 서버가 이에 대한 응답의 헤더에 Access-Control-Allow-Origin과 같은 값을 보내주면 브라우저가 CORS정책 위반여부를 검사하는 방식이다.
3.인증된 요청(Credentialed Request) : 기존 예비요청에서 보안을 더 강화하고 싶을 때 사용한다.
same-origin(기본값), include, omit 이 있다.
자세한 개념 및 정리내용은 상단에 첨부한 참고 URL을 통해 확인해본다.
D.O.N.E!
