SOP(Same Origin Policy)

'동일 출처 정책'
자바스크립트 엔진 표준 보안 규칙
하나의 출처(Origin)에서 로드된 자원(문서나 스크립트)이 호스트나 프로토콜, 포트번호가 일치하지 않는 자원과 상호작용 하지 못하도록 요청 발생을 제한, 동일 출처(Same Origin)에서만 접근 가능 정책.

SOP는 출처가 다른 자원과 상호작용 하지 못하도록 제한.
SOP는 잠재적으로 해로울 수 있는 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한, 분리함으로써 가능한 공격 경로를 줄여줌.

CORS(Cross Origin Resource Sharing)

'교차 출처 자원 공유'
웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있고,
다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답 반환.
이는 시스템 수준에서 타 도메인 간 자원 호출을 승인하거나 차단하는 것을 결정.
CORS는 웹페이지상에서 자바스크립트를 이용해 XHR(XMLHttpRequest)를 다른 도메인으로 발생 시킬 수 있도록 해주는 기능을 가지고 있고, XHR 기반 cross-origin HTTP요청을 이용해 자원을 공유해야 하는 브라우저와 서버 간의 안전한 교차 출처 요청 및 데이터 전송 지원.

CORS를 허용하려면, 서버에서 cross-origin HTTP 요청을 허가하는 헤더를 설정해주어야 한다.
CORS는 출처(도메인, 포트, 프로토콜)가 다른 서버의 자원에 접근할 수 있는 권한을 부여하도록
브라우저에 요청하는 메커니즘, 리소스가 자신의 출처와 다를 때 cross-origin HTTP 요청 실행
CORS 이슈 -> SOP에 의거해 발생.
SOP에 의거해 다른 출처의 리소스와 상호작용 하는 것이 차단, CORS를 설정함으로써 상호작용 가능
클라이언트 사이드 개발 과정에서는 프록시 사용해 해결 가능.
백엔드 개발자에게 요청해 서버에서 설정해도 되지만, 클라이언트와 서버 사이 프록시를 통해 Access-Control-Allow-Origin 헤더를 설정 할 수 있다.
이렇게하면 백엔드에서 따로 설정 안해도됨.

CORS 이슈 해결

서버에서 Access-Control-allow-origin 헤더 추가

서버에서 모든 클라이언트 요청에 대한 cross-origin HTTP 요청을 허가하는 Access-Control-Allow-Origin: * 헤더를 추가하면 된다.
하지만 이렇게 설정시 전체 호스트에 대한 요청을 허용하는 것이기 때문에 보안에 취약함.
-> Access-Control-Allow-Origin 응답 헤더는 이 응답이 주어진 origin으로부터의 요청 코드와 공유될 수 있는지 나타냄.

Proxy

proxy Server는 헤더를 추가하거나 요청을 허용/거부하는 역할을 중간에서 해줄 수 있기 때문에 응답을 주고 받을때 Proxy 서버에서 Access-Control-Allow-Origin: * 헤더를 담아 응답.
프로젝트를 개발 시 Proxy를 사용하는 것은 필수 X,
하지만 백엔드에서 개발 서버를 위한 CORS 설정을 안해도 돼서 불필요한 코드를 아낄 수 있다.

webpack-dev-server proxy

프론트엔드에서 webpack-dev-server-proxy 기능을 사용하면 서버쪽 코드를 수정하지 않고 해결가능.
webpack-dev-server의 프록시 사용시, 브라우저에서 API를 요청할 때 백엔드 서버에 직접적으로 요청을 하지 않고, 현재 개발서버의 주소로 요청하게된다.
해당 요청을 받아 그대로 백엔드 서버에 전달. 백엔드 서버에서 응답한 내용을 다시 브라우저 쪽으로 반환.
CRA(create-react-app)로 생성한 프로젝트라면 package.json에 proxy 값을 설정해 간단하게 webpach-dev-server proxy 기능을 활성화 할 수 있다.

SOP - 같은 오리진을 가진 리소스만 접근 가능 제한
CORS - 도메인 or 포트가 서로 다른 Origin간에 리소스를 전달하는 방식을 제어.