이번 주의 테마 - CORS
CORS? 프론트와 백이 만날수 있게 해주는 일종의 검증
-
Cross Origin Resource Sharing의 약자
-> 우리는 프론트에서 던져주는 값을 받아 DB가 받아들일 형식에 맞게 가공해서 집어넣을 로직을 백엔드에서 구현해놓아야 하고,
또한 우리가 DB에서 꺼내 전달하는 데이터가 프론트에서 무사히 출력되어야 한다.
-> 이 과정에서 반드시 마주치게 되는 것이 이 CORS 관련한 오류라고. -
일명 '웹개발을 하다 보면 피할 수 없는 멍멍이같은 오류' 라고 표현들 하신다.
저 아니고 이분이 그랬어요 - 출처 블로그 링크 -
프론트의 요청 코드가 이상한 것도 아니고,
백엔드의 응답 코드나 DB 상태가 이상한 것도 아닌데,
요청은 항상 빨간색으로 실패를 띄워 프론트와 백을 모두 화나게 만드는 저혈압 치료제.
현상 발생 이유 - 웹 브라우저는 HTTP 요청 형식에 따라 다른 특성을 가지기 때문
-
미디어 소스의 태그를 걸고 싶습니까? 당신은 무사통과
-> img, video, script, link 등은 기본적으로 Cross-Origin 정책. -
XMLHTTPRequest, Fetch API script 등을 쓰십니까? 당신은 안됩니다
-> 이쪽은 기본적으로 Same-Origin 정책.
-> 에? 그게 무슨 말이에요?
-> JS에서의 요청은 기본적으로 다른 서버 도메인의 요청을 보안상의 이유로 제한시킨다.
한마디로, '외부 서버의 자료를 내가 뭘 믿고 허락해줄거야?' 라는 것. -
즉, 똑같이 이미지를 불러와도 ajax로 요청할때랑 img src= 로 요청할때랑 소스 관련 보안정책이 다르다는 것.
그럼 영원히 외부 도메인은 못쓰나요? 🥺 -> Nope. 우린 답을 찾을 것이다. 늘 그랬듯이.
Access to fetch at ‘https://myhompage.com’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
보통 이런 류의 메시지를 많이 보게 될 것이다. 대강 해석하면 이렇다.
-> 니가 보낸 요청은 CORS 정책에 의해 블락되었음.
-> 왜냐면 니 요청 헤더에 'Access-Control-Allow-Origin' 이 없었거든.
-> 블락 안당하고 싶으면 request mode를 'no-cors'로 설정해서 CORS를 비활성화 시키셔.
(하지만 CORS를 disabled 시켰을때 해커가 뭔가 심어서 보내도 난 모른다?😛)
