[NetWork] CORS(Cross-Origin Resource Sharing)

CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)

서로 다른 출처(origin) 간의 리소스를 공유할 수 있게 해주는 것

출처(origin)란?

origin은 protocol + host + port를 의미함
(참고로 포트는 https는 443, http는 80번이며, 생략가능함)

SOP(same origin policy, 동일 출처 정책)이란?

SOP은 브라우저에서 보안을 위해 동일한 출처끼리만 리소스를 공유할 수 있게하는 정책을 뜻함

예전에는 프론트와 백엔드를 따로 구성하지 않고 한 번에 구성해서 모든 처리가 같은 도메인에서 가능했음
하지만 시간이 흐르고 웹이 커지면서 클라이언트에서 api를 직접 호출하게 됨 -> 그런데 클라이언트와 api가 다른 도메인인 경우가 많음 -> CORS 생김(즉, 서버에 리소스 호출이 허용된 출처를 명시해주면 출처가 다르더라도 리소스를 공유할 수 있도록 해주자!)

CORS 해결 방법

1. 서버단에서 Access-Control-Allow-Origin 응답 헤더 셋팅하기
   Access-Control-Allow-Origin 헤더를 서버에서 설정해서 요청을 수락할 출처를 명시적으로 지정할 수 있음

*(와일드카드)를 사용하면 출처에 상관없이 리소스에 접근할 수 있기 때문에 보안에 취약해짐
따라서 명시적으로 직접 허용할 출처를 셋팅하는 게 좋음

'Access-Control-Allow-Origin': https://example.com

2. Proxy 설정(in React)
   프록시 서버를 사용해 웹 어플리케이션이 리소스와 동일한 출처에서 요청을 보내는 것처럼 보이므로 CORS 에러 방지 가능

리액트에서는 package.json에서 아래와 같이 설정하면 간단하게 프록시를 사용할 수 있음

"proxy": "https://openapi.naver.com"

하지만 이 방법은 개발할 때만 사용가능해서 배포하면 적용이 안 됨

3. API Routes(Next.js에서 내가 해결했던 방법)
   여기 참조