CORS란?

CORS는 크로스-오리진-리소스 셰어링의 약자입니다.

처음 리소스를 제공한 도메인이 현재 요청하려는 도메인과 다르더라도 요청을 허락해 주는 웹 보안 방침입니다.

저의 프로젝트의 애플리케이션에서 프론트엔드 서버의 도메인은 http://localhost:3000  입니다.

따라서 현재 Todo 페이지의 Origin은 http://localhost:3000  입니다.

componentDidMount 함수의 fetch 부분에서 http://localhost:8080 으로 새 요청을 보내고있습니다.

이때 브라우저는 2개의 요청을 보내게 되는것입니다.

첫번째 요청은 Option에 메서드를 사용하는 요청입니다.

이 메서드는 보통 이 리소스에 대해 어떤 HTTP 메서드를 사용할 수 있는지 확인하고 싶을 때 보냅니다.

OPTION 요청이 반환되고 CORS 여부 및 GET 요청 사용 가능 여부를 확인하면

두 번째 요청으로 우리가 원래 보내려고 했던 요청을 보냅니다.

개발자 도구의 Network 탭에서 브라우저를 새로 고침하면 리액트 애플리케이션이 실행하는 각종 HTTP 요청을

확인할 수 있습니다.!!

브라우저는 HTTP 요청의 헤더에 이 요청의 Origin을 함께 보냅니다.

HTTP OPTIONS 요청을 보내는 경우 http://localhost:8080 은 이요청을 보낸 리소스의 원래 서버, 즉

요청의 Origin 을 확인합니다.

만약 요청의  Origin이 자신과 같은 Origin 이라면 요청을 수행합니다.

그러나 우리 애플리케이션 처럼 요청의 Origin이 다른경우에는 요청을 거절하게됩니다.

응답의 상태코드가 403, Forbidden 입니다. 또 어떤 HTTP메서드를 사용할 수 있는지도 나와있지 않습니다.

응답코드가 200일때 OK 상태코드입니다. 

그것이 나오게 된다면

Access-control-allow-origin 에 http://localhost:3000, 즉 프론트엔드 어플리케이션 서버의 주소가 적혀있고

Access-Control-Allow-Methods에 허용되는 메서드가 나열되어 있습니다.

따라서 브라우저는 다음 요청들을 보낼수 있게됩니다.