[도전 기술!] CORS(교차 출처 자원 공유) 설정

안녕하세요? 주니하랑 입니다.

본 내용은 주니하랑이 Web 개발 프로젝트를 하면서 도전했던 기술들에 대한 내용을 정리하는 곳 입니다!

이 글은 함께 프로젝트 했던 Front End 꿈나무 Crew가 작성한 것이에요.

주니하랑은 Back End 개발을 맡았었답니다!

---

 

 

클라이언트는 리액트, 서버는 스프링 부트를 사용하여 개발을 진행하였습니다.

위와 같은 개발 상황에서 Axios를 사용한 API 통신을 진행하려 하자 CORS 에러가 발생했고 이를 해결한 과정을 소개 하려 하는 것이에요.

 

CORS 에러는 왜 발생하는가?

프론트엔드 개발을 하면서 서버와 통신을 진행할 때 위와 같은 에러를 심심치 않게 발견하실 수 있습니다. 해당 에러는 CORS 정책을 위반할 때 발생하게 되는데요.

먼저 CORS의 기본적인 내용에 대해서 설명하겠습니다.

 

CORS

CORS는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다.

웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행하게 됩니다.

 

동일 출처 정책

보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한합니다. 이는 동일 출처 정책때문인데요.

어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식입니다.

해당 정책을 통해 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄일 수 있겠죠?

 

반응형

 

에러 원인

즉, 클라이언트와 서버의 출처가 동일하지 않았기 때문에 해당 에러가 발생한 것입니다.

저희는 개발환경에서 포트를 따로 설정하지 않았기 때문에 클라이언트와 서버는 각각 기본 포트인 3000 과 8080을 사용하고 있었고 이는 동일 출처 정책에 부합하지 않습니다.

 

해결 방법

CORS 정책을 확인해가며 저희는 에러 발생 이유를 깨달았습니다. 이제 에러를 해결해야 될 차례군요.

저희는 에러를 해결하기 위해 몇 가지의 방법을 찾아보았습니다.

 

HTTP 응답 헤더

첫 번째로 HTTP 응답 헤더를 설정하는 방법입니다.

Axios를 사용한 API 통신의 기본 코드는 아래와 같습니다.

axios.post('uri', { postData } ) 
	.then((res) => {}) 
    .catch((err) => {})

 

위의 코드에서 HTTP 응답 헤더에 CORS를 설정해보겠습니다.

axios.post('uri', { headers: { 
	'Access-Control-Allow-Origin': '허용하고자 하는 도메인', 
    }, { postData } ) 
    .then((res) => {}) 
    .catch((err) => {})

위와 같은 방법으로 CORS 에러를 해결할 수는 있었습니다. 하지만 저희는 API 통신을 할 때마다 매번 axios 파라미터로 HTTP 응답 헤더의 설정을 작성해야 된다는 점을 좋지 않게 생각했으며 이를 분리해 관리할 방법을 찾아보게 되었습니다.

 

 

프록시(Proxy) 설정

두 번째로 찾은 방법은 프록시 설정입니다.

프록시

프록시는 프로토콜에 있어서 대리 응답 이라는 개념으로 이해할 수 있습니다.

프록시 서버의 역할로

1. 인터넷 측이 유저의 실제 IP를 알 수 없도록 합니다.
2. 클라이언트에서 서버에 데이터를 보낼 때 프록시 서버에서 데이터를 바꾸고 서버 측에 전달할 수 있습니다.

저희는 프록시 서버를 통해 CORS 에러와 쉬운 코드 작성 및 유지 보수가 가능할 것이라 생각했고 바로 저희 개발 환경에 적용하기로 했습니다!

proxy: { '/api/': { 
	target: '<http://localhost:8080>', 
    changeOrigin: true, 
    }, 
},

 

저희는 create-react-app을 사용하지 않고 웹팩 설정을 했기 때문에 proxy 설정을 위와 같이 진행했습니다.

서버에서 모든 REST API의 URI설계를 /api로 시작하게끔 변경하였고, 클라이언트에서 /api로 시작하는 모든 통신에 프록시 설정을 해주었습니다.

 

결론

CORS 에러를 해결하기 위해 방법을 찾아내면서 여러가지 방법도 알게 되었고 결과적으로 프록시를 사용해 깔끔한 코드를 작성할 수 있어 만족도가 높은 작업이었습니다.

첫 번째로 서버와 API 통신을 진행할 때 이메일 인증 API를 진행하면서 서버에 쿠키 전달이 제대로 이루어지지 않는 현상이 발생해서 알게된 이슈였는데요. (해당 쿠키 정책도 다룰 예정입니다! 🧐)

만약 get 메소드를 먼저 작업했다면 개발 중간에 해당 이슈를 알게 되었을텐데 (매도 먼저 맞는게 낫다고,,, 😅) 미리 알아서 다행이라고 생각합니다.