[CORS]

CORS

CORS : cross origin resource sharing
Sop : same origin policy

protocol, host, port 중 무엇 하나가 다르면 다른 출저라고 취급한다.
이 세가지가 모두 같아야 같은 출처이다.

다른 출처의 리소스가 필요하다면 어떻게 할까?

cors : 다른 출처의 자원을 공유

추가 http 헤더를 활용하여 한 출처에서 실행 중인 웹 어플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하는 것

CORS 접근 제어 시나리오

• 단순 요청 (simplet request)
  preflight 요청 없이 바로 요청을 날린다.

• 프리플라이트 요청(preflight) -> 사전확인 작업, 서버에게

options 메서드를 통해 다른 도메인의 리소스에 요청이 가능한 지 확인 작업
2번 요청이 보내진다.

prefligth request

preflight response
서버 측 허가 출처

• crdentialed request
  인증 관련 헤더를 포함할 때 사용하는 요청이다.

클라이언트 측
credentials : include

서버 측
access-control-allow-credential: ture
(access-control-allow-origin: *은 안된다)

왜 preflight 가 필요한가?

CORS에 대해 설정이 없는 서버를 위해서이다.

CORS 해결하기

1) access-control-allow-origin 전체 허용
브라우저가 갖고 있응 쿠키 정보를 이용해 다른 origin에서 공격 가능하기 때문에 취약하다.

2) 프록시 방식
브라우저 -> 프론트 -> 백엔드

서버랑 클라이언트의 중계 역할을 수행하는 서버,

1. package.json에서 proxy 값을 설정
   package.json에 proxy 값을 설정하여 proxy 기능을 활성화 하는 방법.

2. webpack-dev-server proxy 기능
   리액트 개발 환경에서 , 서버 쪽 코드를 수정하지 않고 해결할 수 있다.

이 경우에는 클라이언트는 프록시 서버에 요청을 보내고 프록시 서버는 서버로 전달하여 반환