CORS

Cross Origin Resource Sharing (교차 출처 리소스 공유)
브라우저는 기본적으로 SOP 정책을 따르고 있는데,
개발을 하다보면 서로 다른 출처간의 상호작용을 해야하는 때가 있다
이 때 출처가 다른 서버간의 리소스 공유를 허용 하도록 CORS 를 설정하여 문제를 해결한다

✅ 동일 출처 정책 (SOP, Same-Origin Policy)

• 동일한 출처에서만 리소스를 공유할 수 있다 는 정책

Origin(출처)이란?

Protocol, Host, Port 까지 모두 합친 URL 을 의미

왜 필요하지? 🤨

만일 동일 출처 정책이 없다면 CSRF, XSS 등의 방법으로 사용자 정보를 해킹당할 수 있음

✅ 하지만 어쩔 수 없이 다른 출처간에 상호작용을 해야하는데?

흔한 예로 프론트와 백엔드가 협업하면서 각자 서버를 띄우게 되었을 경우에도
3000포트와 8080포트가 서로 다른 출처로 판단되어 CORS 에러를 발생시킨다
이를 해결해야 다른 출처간 리소스를 공유할 수 있게 된다

알아둘 것은 출처를 비교하는 것은 브라우저의 스펙으로
서버 응답은 정상적으로 된 것으로 보인다
(실제로 네트워크창에 200ok가 뜨지만 콘솔에서는 에러가 나고 정보를 받아올 수 없음)
(+ 브라우저가 내는 오류이기 때문에 postman 에서는 오류가 안남)

✅ 해결방법

서버에서 세팅하기

• 서버에서 헤더에 Access-Control-Allow-Origin 를 설정하여 요청을 수락할 출처를 명시적으로 지정

프록시 서버 사용

• 웹 애플리케이션이 리소스를 직접적으로 요청하는 대신 프록시 서버를 사용하여 리소스 요청을 전달
  (동일한 출처에서 요청을 보내는 것처럼 보이기 때문에 CORS 에러를 방지할 수 있음)