Po_tta_tt0 2022. 11. 14. 21:03

VUE랑 Django를 함께 사용해보고있는데... 너어어무재밌잖아!?!!?!
별 생각 없이 프론트가 재밌어보여~ 프론트해야지!! 하고 시작했는데 알고보니 웬걸 백엔드도 너무너무 재밌어요ㅎㅎ
여유가 생기면 백엔드도 조금 더 깊게 들어가봐야겠습니당

무엇보다 싸피에서 함께 공부하는 백엔드분이 자신의 전문분야에 대해서 너무 신나게 말씀하시는게 좋아서 더 배워보고 싶어요

서두가 너무 길다..!

0. CORS 에러란?

프론트 : API 줄 수 있니?
백 : ㅇㅇ 기다려봐 여기!!
브라우저 : 둘이 뭐하냐? -- 차단!

간단히 말하면 이런 내용입니다.
브라우저가 요청을 보내고 서버의 응답은 브라우저까지 다시 도착하지만(200)
브라우저가 보안상의 위주로 CORS 에러를 발생시키는 것입니다

CORS에러는 SOP를 기반으로 발동하는 에러입니다
SOP란 뭘까요?

✍ SOP(Same Origin Policy)

'동일 출처 정책'
불러온 문서나 스크립트가 아예 다른 출처에서 가져온 리소스와 상호작용하는 것을 제안하는 보안 방식입니다.

아주 멋진 보안 방식이죠!

잠재적으로 해로울 수 있는 문서를 차단하여 공격 경로를 줄이는 방식이니까요.

신경쓰지 않아도 알아서 잘 작동해주는 이 SOP 보안이 프론트와 백의 만남을 가로막습니다.

🐸 '음,, 그러면 프론트와 백은 어떻게 상호작용하지?'

일단 브라우저가 말하는 동일 출처에 대해서 알아봅시다

URL의 Protocol, Host, Port를 모두 포함해서 출처라고 부릅니다
그러니까
Same Origin이란

http:// : Scheme / Protocol
localhost: : Host
3000 : Port

이 모두 같아야 하는거죠

🐸 '...그래서 어떻게 상호작용하지????'

CORS 에러 없이 상호작용을 하기 위해서는 추가적인 HTTP Header을 사용해야 합니다.

그러니까,
특정 출처에서 실행중인 웹 어플리케이션이, 다른 출처의 자원에 접근할 수 있는 권한을 부여해주는 겁니다.
부여해준다 == 브라우저에게 '얘네는 동일 출처야!' 라고 알려주는 것

다시 프론트와 백 대화를 볼까요?

프론트 : API 줄 수 있니?
백 : ㅇㅇ 기다려봐 여기!! 🌟
브라우저 : 둘이 뭐하냐? -- 차단!

🌟 이 부분에서 백엔드는 API 뿐만 아니라 출처를 함께 보내게 됩니다.
어떤 출처에서 자신의 컨텐츠를 사용할 수 있을지 서버에 지정해준다면, 보내지는 출처는 브라우저에서 차잔되지 않겠죠?

만약 다른 출처의 리소스를 가져온다면, 서버는 브라우저에게 미리

나 이거 보낼건데, 출처는 다르거든? 근데 접근 허용해줘

라고 말하는 것입니다.

결과적으로 CORS 에러를 피해 다른 출처의 리소스를 가져오기 위해서는, 그 출처에서 CORS header을 명확하게 작성하고 응답을 넘겨주어야겠죠??

🐸 'CORS header을 작성하면된다고? 어떻게??'

헤더를 우리가 직접 다 만들 필요는 없고,
CORS 표준에 의해 추가된 HTTP Response Header을 통해 통제할 수 있습니다.