인프런 커뮤니티 질문&답변
작성한 질문수
CORS 에러에 대해서 좀 더 자세한 설명 부탁드립니다.
작성
·
280
0
안녕하세요.
jQuery가 melon으로 AJAX 요청을 날렸을 때 CORS 에러가 발생하는 사례에 대해서 좀 더 자세한 설명을 요청드리고 싶은데요. 브라우저가 차단하는 거라고 말씀하셨는데, 정확히 어떤 일들이 어떤 순서로 일어나는지 궁금합니다.
강의 중에 말씀하신 것을 바탕으로 melon.com에서 CORS를 허용하는 host 중에 localhost:8000이 없기 때문에, 즉 localhost:8000에서 AJAX 요청을 보냈을 때에 melon.com이 CORS를 허용한다는 헤더가 포함된 응답을 보내주지 않기 때문이라고 이해했는데요. 사실 이렇게 생각하면 결국 melon.com에서 요청에 대해서 유저가 기대한 응답을 주는 것을 거부했다는 것처럼 느껴지는데, 유저가 사용하는 브라우저가 차단을 한다는 건 어느 단계에서 무엇을 그렇게 한다는 것인가요?
그리고 JSONP의 경우는 리액트를 사용하면서도 종종 사용하는 경우가 있는 건가요?
답변 1
1
안녕하세요.
CORS에 대한 자세한 내용은 아래 Mozilla 문서를 참고해보시면 좋습니다.
https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
브라우저의 Ajax 요청에서 사용하는 XMLHttpRequest와 Fetch API는 동일 출처 정책 ( https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy )을 따릅니다.
그래서 웹브라우저는 리소스 요청에 있어서
현재의 호스트명(A) (프로토콜://도메인:포트)과는 다른 호스트(B)로의 리소스 요청이 있을 때
호스트(B)의 응답 헤더에서 아래 헤더를 통해 호스트(A)로부터의 요청을 허용함을 표현해야 합니다.
Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
이러한 허용이 없다면 호스트(B)로부터 응답을 받았지만 브라우저는 CORS 오류를 발생시키며
호스트(A)로부터의 응답을 반환하지 않습니다.
이러한 보안 정책은 <script> 요소에는 해당되기 않기에 <script> 요소를 활용하여 GET 요청을 보내고 응답을 받는 방식도 있습니다. 그것이 jsonp입니다.
리액트는 UI 라이브러리일 뿐, 웹에서 Ajax 요청을 보내는 것은 jQuery와 마찬가지입니다.
리액트를 활용한 개발에서도 CORS를 허용하지 않는 리소스에 대해 GET 요청이 필요하다면 jsonp 요청을 사용하거나, 서버를 경유해서 요청을 보낼 수 있습니다. CORS는 브라우저 내에서만 사용되는 정책이니깐요.
화이팅입니다. :-)
늘 자세한 답변 감사드립니다.
"이러한 허용이 없다면 호스트 (B)로부터 응답을 받았지만 브라우저는 CORS 오류를 발생시키며 호스트(A)로부터의 응답을 반환하지 않습니다."
이 부분에서, 브라우저가 호스트 (A)로부터의 응답을 반환하지 않는다는 이야기는 브라우저가 호스트 (A)로부터 응답을 받더라도 렌더링하는 대신에 에러를 띄우거나 데이터를 받지 않은 것처럼 처리한다는 의미로 보면 되는 걸까요?