서로 다른 도메인의 리소스 요청을 보내고 받기 위해서는
웹 프론트엔드와 서버에서 특정한 작업을 해줘야합니다.
프론트에서는 리퀘스트 헤더에 CORS 관련 옵션을 넣어주는 것이고
서버의 경우에는 리스폰스헤더에 해당하는 프론트의 요청을 허용한다는 내용을 넣어주는 겁니다.

option 메소드를 먼저 보내는데 서버에서 이 걸 이용하면 특정 라우트나 특정 도메인에서 오는 요청만 허용하도록 할수도 있다.

일단 여기까지만 알아봤다가 일반 클라이언트가 요청하는 거랑
서버가 서버끼리 요청하는 거랑 어떻게 구분하고 cors를 적용하는지가 궁금해져서 더 찾아보았다.

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F
굉장히 좋은 글 발견. 인파라는 분의 블로그인데 사이트가 너무 무겁다.

origin(출처)란?

CORS가 다른 origin간의 리소스 공유를 막는 것이므로 출처가 우선 뭔지를 알아야 한다.

https://www.domain.com:3000/user?query=name&page=1#first

여기서
https:// 는 프로토콜
www.domain.com 는 HOST
:3000 는 포트
/user 는 path
?query=name&page=1 는 Query string
#first 는 Fragment
인데
이 중 프로토콜, 호스트, 포트 이 3가지로 구성된 처음 3가지
https://www.domain.com:3000
가 오리진이다. 이 세가지 중 하나라도 다르면 다른 출처라는 것이다.

SOP 동일출처 정책은 같은 출처에서만 리소스를 공유할 수 있도록하는 정책이다.
리소스가 자신의 출처와 다를 경우 브라우저는 교차출처 요청을 실행한다.

출처를 비교하는 로직은 서버에 구현된 스펙이 아닌
브라우저에 구현된 스펙이다.
만약 CORS 정책을 위반하는 요청에 서버가 정상적으로 응답하더라도 브라우저가 이 응답을 분석해서 CORS 정책에 위반되면 그 응답은 처리하지 않는다.

중요한건 브라우저가 차단시킨다는 거. 브라우저 통하지않고 vscode 같은거로 보내면 잘 된다.