코드스테이츠 42기/[TIL] Section 2

S2U10 [Web Server] 기초 1

랜덤다이스 2022. 12. 8. 17:54

이해가 안되는게 점점 많아짐.. 집중력도 떨어짐..

의기소침해짐.. 자존감도 낮아짐.. 

뭔가 동기부여 될만한 기운이 날만한 작은 성취가 필요하다....ㅠㅠ

 

보이는 라디오 세션에서 다들 나만 힘든게 아니라는게 느껴지니까 

조금의 위로는 되는구나... 오늘 페어하신분도 비슷한 수준이신것 같아서

그것도 위로가 됨.. 그분은 드림 코딩을 따로 수강하고 계신다고 하시니

나도 괜찮은 학습영상을 참고 해봐야겠다..

그리고 작은 성취라 했으니.. 작은 문제라도 풀어보자..

 

공부하는 장소가 집이다 보니 쉬는 공간이랑 같을때 꿀팁

1.공부할때 조명색과 쉴때 조명색을 바꿔본다

2.공부할땐 외출복으로 갈아입고 쉴땐 편한차림으로 

 

나이 숫자 앞에 3이 붙는다고 취업이 걱정이 되는건..

절박한 마음 되새기자~

 

개념학습

CORS 에러

CORS가 필요하게 된 배경인 SOP에 대해서 먼저 알아보도록 하자.

 

SOP

SOP은 Same-Origin Policy의 줄임말로, 동일 출처 정책을 뜻함.

한 마디로 ‘같은 출처의 리소스만 공유가 가능하다’라는 정책, 여기서 말하는 ‘출처(Origin)’는 다음과 같음.

출처는 프로토콜, 호스트, 포트의 조합으로 되어있음. 이 중 하나라도 다르면 동일한 출처로 보지 않음.

 

예)

 

동일 출처 정책 : 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여줌.

SOP은 모든 브라우저에서 기본적으로 사용하고 있는 정책.

 

그런데, 다른 출처의 리소스를 사용하게 될 일은 너무나도 많음.

어떻게하면 다른 출처의 리소스를 받아올 수 있을까?

 

CORS

위 문제 상황에서 필요한 것이 바로 CORS 입니다. CORS는 Cross-Origin Resource Sharing의 줄임말로 교차 출처 리소스 공유를 뜻합니다.
MDN에서는 CORS를 다음과 같이 정의하고 있습니다.

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다.

 

즉, 브라우저는 SOP에 의해 기본적으로 다른 출처의 리소스 공유를 막지만, CORS를 사용하면 접근 권한을 얻을 수 있게 되는 것입니다.

 

다시 처음에 봤던 에러를 다시 한 번 살펴볼까요?

 

다른 출처의 리소스를 가져오려고 했지만 SOP 때문에 접근이 불가능합니다. CORS 설정을 통해 서버의 응답 헤더에 ‘Access-Control-Allow-Origin’을 작성하면 접근 권한을 얻을 수 있습니다.

즉, 이 에러는 CORS 때문이 아니라, SOP 때문입니다. CORS는 오히려 이 에러를 해결해줄 수 있는 방안이었던 것이죠!

 

CORS 동작 방식

CROS의 동작 3가지

1. 프리플라이트 요청 (Preflight Request)

실제 요청을 보내기 전, OPTIONS 메서드로 사전 요청을 보내 해당 출처 리소스에 접근 권한이 있는지부터 확인하는 것을 프리플라이트 요청이라고 합니다.

위 이미지의 흐름과 같이, 브라우저는 서버에 실제 요청을 보내기 전에 프리플라이트 요청을 보내고, 응답 헤더의 Access-Control-Allow-Origin으로 요청을 보낸 출처가 돌아오면 실제 요청을 보내게 됩니다.

 

2. 단순 요청 (Simple Request)

단순 요청은 특정 조건이 만족되면 프리플라이트 요청을 생략하고 요청을 보내는 것을 말합니다.

3. 인증정보를 포함한 요청 (Credentialed Request)

요청 헤더에 인증 정보를 담아 보내는 요청입니다. 출처가 다를 경우에는 별도의 설정을 하지 않으면 쿠키를 보낼 수 없습니다. 민감한 정보이기 때문입니다. 이 경우에는 프론트, 서버 양측 모두 CORS 설정이 필요합니다.