CORS / CORS 해결방안 / 처리 방법

CORS란 교차 출처 리소스 공유(Cross-origin Resource Sharing)로, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하기 위한 체제이다. 출처는 프로토콜, 도메인, 포트로 구성되며, 같은 출처는 이 세 가지 요소가 동일한 경우를 말한다. 브라우저는 CORS 정책을 적용하여 요청을 보낼 때 출처를 검사하고, 서버는 응답 헤더를 사용하여 허용된 출처를 명시한다. 만약 CORS 정책을 위반하는 리소스 요청이 발생하면 브라우저는 해당 응답을 무시하고 접근을 차단한다.

CORS의 동작 방식은 크게 세 가지가 있다:

Preflight Request (프리플라이트 요청): 브라우저는 특정 조건을 충족하는 요청에 대해 사전에 서버에 OPTIONS 메서드를 사용하여 프리플라이트 요청을 보낸다. 이는 실제 요청 전에 서버가 요청을 받아들일 수 있는지 확인하는 단계다.

Simple Request (단순 요청): 단순한 요청은 예비 요청 없이 바로 서버에 본 요청을 보내고, 서버는 응답 헤더에 Access-Control-Allow-Origin과 같은 값을 포함시켜 브라우저가 CORS 정책을 확인한다.

Credentialed Request (인증 요청): 인증 관련 헤더를 포함하여 요청을 보내는 경우 사용된다. 브라우저의 비동기 리소스 요청 API인 XMLHttpRequest 객체나 fetch API는 기본적으로 인증 관련 헤더를 포함하지 않기 때문에, credentials 옵션을 변경하지 않으면 쿠키를 주고받을 수 없다.

이 시나리오는 CROS의 기본적인 방식이라기 보다는 다른 출처 간 통신에서 좀 더 보안을 강화하고 싶을 때 사용하는 방법이다.

 

CORS를 해결하기 위한 방안으로는 다음과 같은 방법들이 있다:

응답 헤더에 Access-Control-Allow-Origin을 설정: 서버 측에서 접근 권한을 주는 헤더를 추가하여 해결할 수 있다. 모든 도메인에 대해 접근을 허용하려면 "*"를 설정하거나, 특정 도메인만 허용하려면 해당 도메인을 명시하면 된다.

CORS 모듈 사용: 서버 측에서 CORS 모듈을 사용하여 CORS 정책을 해결할 수 있다. CORS 모듈을 사용하면 특정 도메인이나 특정 요청에 대해 접근을 허용하도록 설정할 수 있다.

webpack-dev-server의 proxy 기능: 리액트 개발 환경에서 webpack-dev-server의 proxy 기능을 사용하여 서버 측 코드를 수정하지 않고도 CORS 에러를 해결할 수 있다. 프록시를 설정하여 webpack-dev-server가 클라이언트 요청을 가로채고 중간에 프록시 서버를 통해 실제 서버로 요청을 전달한다.

package.json에 proxy 값을 설정: create-react-app과 같은 도구를 사용하여 생성한 프로젝트에서는 package.json에 proxy 값을 설정하여 프록시 기능을 활성화할 수 있다. 이를 통해 클라이언트 요청을 프록시 서버를 통해 서버로 전달할 수 있다.

이러한 방법들을 활용하여 CORS 에러를 해결할 수 있다.

 

자세한 내용은 

https://whereiserror.tistory.com/147 

CORS / CORS를 위한 처리 / 해결방안

여기에 올려놨다.