1 minute read

문제 상황

프로젝트를 진행하면서 프론트와의 협업 중에 제일 자주 겪는 문제가 CORS 이다.

오늘도 CORS 를 경험하고 해결하고 왔는데 CORS 에 대한 메타인지가 충분하지 않음을 느꼈다.

CORS 문제 해결에 있어 보단 원할한 해결과 소통을 위해 다시 짚어보자

Origin 이란?

  • 쉽게 말하여 프로토콜 + 호스트 + 포트 이다.

Example

URL : http://s-hook.com:8080

프로토콜 호스트 포트
http s-hook.com 8080

SOP ( Single Origin Policy )

origin에서 로드되는 리소스를 다른 origin의 리소스와 소통할 수 있는 방법을 제한하는 보안 정책이다.

Example

리소스 제공 서버 URL : http://site.com:8080

접근 가능 ( origin 이 동일할 때 )

  • http://site.com:8080
  • http://site.com:8080/index.html
  • http://site.com:8080/members/1

접근 불가능

  • https://site.com:8080 ( 프로토콜이 다를 때 )
  • http://site2.com:8080 ( 호스트가 다를 때 )
  • http://site.com:8081 ( 포트가 다를 때)

CORS ( Cross Origin Resource Sharing )

말그대로 다른 origin 끼리 리소스를 공유하게 해주는 것이다.

CORS 요청, 응답 과정

브라우저

  • origin이 같을 경우 바로 요청을 보낸다.
  • origin이 다를 경우
    • Simple Request 인 경우
      • 브라우저가 CORS 요청을 진행한다.
      • 허용되는 경우는 응답을 전달, 허용되지 않은 경우 클라이언트에게 CORS 에러를 보낸다.
    • 자격증명이 필요하거나 Simple Request 가 아닌 경우
      • 브라우저가 서버에 PreFlight 요청을 보낸다.
      • 허용되는 경우 실제 요청을, 허용되지 않은 경우 클라이언트에게 CORS 에러를 보낸다.

Simple Request

Preflight 요청을 보내지 않고 브라우저가 일반적으로 네트워크 요청과 동일한 방식으로 CORS 요청을 처리하는 비교적 간단한 요청

조건
  • 사용가능한 메서드
    • GET
    • HEAD
    • POST ( 서버에서 리소스의 상태를 변경하지 않는 경우 )
  • 사용가능한 헤더
    • Accept
    • Accept-Language
    • Content-Language
    • Content-Type
  • Content-Type 헤더에 가능한 값
    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain
과정
  1. 브라우저에서 사용가능한 헤더들로만 이루어진 요청을 서버에 보낸다.
  2. 서버에서 허용된 origin 일 경우 Access-Control-Allow-Origin 헤더를 포함하여 응답한다.
  3. 서버에서 허용되지 않은 origin 일 경우 응답에 특정 CORS 오류 코드와 메시지를 포함하여 응답한다.
  4. 브라우저에서 Access-Control-Allow-Origin 헤더에서 origin 허용을 검증하고 알맞은 응답을 클라이언트에게 전달한다.

PreFlight

클라이언트가 실제 요청을 보내기 전에 브라우저가 먼저 OPTIONS 메서드를 사용하여 요청하는 것

요청에 포함되는 헤더
  • Origin ( 실제로 요청을 보내는 origin )
  • Access-Control-Request-Method ( 실제로 요청을 보내려는 메서드)
  • Access-Control-Request-Headers ( 실제로 요청시 보내려는 헤더들 )
응답에 포함되는 헤더
  • Access-Control-Allow-Origin ( CORS 요청이 허용된 origin )
  • Access-Control-Allow-Methods ( CORS 요청이 허용된 메서드 )
  • Access-Control-Allow-Headers ( CORS 요청에 허용된 헤더들 )
  • Access-Control-Allow-Credentials ( CORS 요청에 자격증명 사용 여부 )
  • Access-Control-Expose-Headers ( 클라이언트가 접근할 수 있는 헤더들 )

서버

  • 브라우저에게 cors 정책을 전달한다.

글 쓰며 느낀 점

이번 CORS 메타인지를 위한 글을 쓰면서 느낀게 엄청 두루뭉실하게 알고 있던 지식이 너무 많았다는 것이다.

우테코 프로젝트 팀원들과 해결하지 못한 CORS 문제가 있는 채로 11시가 되어 집에 오게 되었는데 내일 가서 다시 한번 트러블 슈팅 해봐야겠다!!

오늘도 피곤하지만 매우 보람찬 글 작성이였다!

You May Also Enjoy