[4일차] CORS

프론트와 첫 협업 미니 프로젝트가 시작됐다.
시작 전 cors 설정을 해주어야 한다 이야기를 들은적이 있었는데
드디어 알아야 할 때가 온것같다.
cors에 대해 각종 글과 영상을 찾아봤는데 쉽게 와닿지 않았다.

이유는 브라우저에 대한 이해 부족이였다.
나는 그동안 브라우저는 그저 파일을 받아 읽고 보여주는게 전부이고
브라우저 <-> 프론트 서버 <-> 백엔드 서버 의 구조를 가지고있다고 이해하고있었다.
그러나 프론트서버에서 js로 백엔드 서버로 요청을 보내는 것은
결국 브라우저를 통해 요청을 보내는 것이라는 걸 간과하고 있었다.
때문에 js가 서버에 요청을 보내면 브라우저를 통해 백엔드 서버로 오고 서버의 응답은 브라우저를 통해 프론트 서버로 가게 된다는 것이다.
젊지는 않지만 똑똑한 조원의 설명으로 인해 이를 알게 되었다.
이를 이해하면서 cors가 왜 브라우저에서 차단을 하는지, 또 하이재킹시의 위험등을 이해할 수 있게 되었다.

cors의 동작 방식을 간단히 보면
브라우저가 서버에 요청을 보낼 때 origin을(프로토콜과 호스트(포트를 포함)) 함께 보내고
서버에서는 이를 바탕으로 응답헤더에 Access-control-allow-origin 을 통해
해당 출처가 이 리소스에 접근할 수 있음을 알려준다.
그렇게되면 본 요청을 보내 통신을 하는 것이다.

cors를 이해하기 위해서는 sop를 알면 좋은데
sop는 same-origin 즉 같은 출처간에만 api통신이 가능하도록 하는 정책이다.
그러나 그렇게되면 웹은 굉장히 한정적이어 질테고
그를 위한 예외를 둘 수 있는 정책이 cors(cross-origin)이다.

아래의 블로그에 굉장히 친절하고 자세한 설명이 나와있어 이해하는데 굉장히 큰 도움이 되었다.
https://evan-moon.github.io/2020/05/21/about-cors/

아래 블로그에서 브라우저의 구조에 대해 참고하였다
https://inpa.tistory.com/entry/%EB%B0%B1%EC%97%94%EB%93%9C-%EB%A1%9C%EB%93%9C%EB%A7%B5-%F0%9F%8C%90-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%99%80-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC#%E2%80%8B%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98_%EC%A3%BC%EC%9A%94_%EA%B8%B0%EB%8A%A5