영상후기 - CORS

웹개발 짜증유발자! CORS가 뭔가요?

• CORS(Cross Origin Resource Sharing, 교차 출처 자원 공유 방식): 다른 출처 간에 자원을 공유할 수 있도록 하는 것
• 출처는 웹사이트와 API의 주소
• 리소스는 두 출처가 주고받는 데이터
• SOP(Same-Origin Policy, 동일 출처 정책): 서로 다른 출처끼리의 자원 공유를 막는 정책
• 웹 생태계가 다양해지면서 서비스 간에 데이터를 주고 받는 것이 필요해짐
• 백엔드 단에서 CORS를 허락할 출처를 미리 명시
• 브라우저에서 다른 출처끼리의 요청에는 origin 이라는 header를 추가
• origin 항목에는 요청하는 쪽의 scheme(http와 같은 프로토콜)과 domain(example.com), port(:8080) 데이터가 담김
• 해당 요청을 받은 출저 쪽에서는 응답에 Access-Control-Allow-Origin 데이터를 담아서 보냄
• origin에서 보낸 출처 값이 서버의 응답 헤더에 담긴 Access-Control-Allow-Origin에 존재하면 안전한 요청으로 간주, 응답 데이터를 받아온다.
• 토큰 등 사용자 식별 정보가 담긴 요청에 경우. 보내는 쪽 요청 옵션에는 credential 항목을 true로 설정해야 하고, 요청을 받는 쪽은 보내는 쪽의 출처 - 웹페이지 주소를 정확히 명시하고, Access-Control-Allow-Credential 항목을 true로 설정해야 한다.
• simple request: GET이나 POST 등 일정 조건의 요청들에 사용
• preflight request: 요청이 안전한지 확인하고, 허락이 떨어져야 본격적으로 요청을 보낼 수 있게 된다. 서버 데이터에 영향을 줄 수 있는 요청이기 때문에 요청을 보내기 전부터 검증 하는 단계를 거친다.