Web application을 개발을 할 때에, 한 번쯤은 겪어볼 수 있는 CORS 문제.
보통 Front와 Back을 연결할 때 발생하는데, 해당 오류는 왜 발생하는 것일까?

SOP(Same Origin Policy)

먼저, Web Application에는 보안을 위해 SOP 라는 정책이 존재한다.
이름 그대로 같은 Origin에서의 요청이 아니면 자원을 제공하지 않도록 하는 정책이다.

  • 그럼 Origin이란 무엇일까?
    • http://www.domain.com:3000/user?query=name#first
    • 위와 같은 URL이 있을 때, Protocol부터 Port까지를 통틀어 Origin 이라고 칭한다.
      • 예를 들어, http://www.domain.com/hi와 https://www.domain.com/hi는 다른 Origin이다.
      • http://www.domain.com/log와 http://www.domain.com/fog는 같은 Origin이다.
  • 해당 정책은 왜 등장하게 되었나?
    • 과거의 웹은 대부분 SSR(Server Side Rendering)의 경우가 많았다고 한다.
    • 그 말인 즉, 모든 처리가 동일 도메인 내에서 발생한다는 것이다.
    • 하지만 지금은 FE와 BE가 분리된 경우가 많기에, SOP를 위반할 수 밖에 없는 상황이 생긴다.

따라서 우리는 CORS 를 통해 다른 Origin에게 자원을 공유할 수 있도록 한다!

CORS(Cross-Origin Resource Sharing)

교차 출처 리소스 공유 라는 이름을 가진 SOP에 대한 해결 방안이다.
HTTP 헤더의 Access-Control-Allow-Origin 이라는 헤더를 통해 출처를 허용할 수 있다.

  • 단순 Request
    • 본래 단순 요청은, GET, HEAD, POST Method 만을 허용한다.
    • Accept, Accept-Language, Content-Language, Content-Type 만을 허용한다.
    • application/x-www-form-urlencoded, multipart/form-data, text/plain 만을 허용한다.
    • 위의 조건 이외의 요청이 들어오면 Preflight Request 를 보내게 된다.
  • Preflight Request
    • 실제로 HTTP Request를 보내기 전에, Preflight 라는 예비 요청을 보낸다.
    • 해당 요청의 의미는, 이런 메서드와 헤더로 요청을 보낼건데, 너희 서버의 CORS 정책에서 허가가 된 요청이니? 라는 질문이다.
    • OPTION Method를 통해 요청된다.