프로젝트에서 CORS(Cross Origin Resource Sharing) 문제

Front, Back 구분 지어서 프로젝트를 진행하게 되면 초기에 CORS라는 문제에 봉착하게 된다.

이 CORS는 브라우저에서 발생시키는 에러로써,

현재 브라우저 접속 (도메인+포트)과 다른 (도메인+포트) 자원을 요청했을 때 그 원인이 된다.

(현재 브라우저 접속 도메인+포트 VS  API 서버 (도메인+포트))

 

이는 브라우저와 같은 클라이언트에서 API 서버로 다이렉트로 요청을 하게 되었을 때의 문제를 차단하기 위한 것이고 이를 해결하려면 두 가지 방식이 있다..

CORS의 경우 브라우저가 아닌 서버 대 서버로 다른 도메인의 Request를 날려도 CORS 문제가 나지 않는 부분을 이용해 아래 2가지 방법을 고려해본다..

1. "프록시 방식" 으로 브라우저와 API 서버간에 웹 서버를 통해(웹서버로 접속한 도메인과 브라우저로 접속한 도메인이 같고.. 웹서버에서 API 서버로 Request를 날리면 서버간 Request를 날리면 CORS가 발생하지 않기 때문에 이 점을 이용한다.

1-1 운영시 브라우저->웹서버->WAS(API서버)

1-2 개발시 브라우저->프록시(웹팩config)->WAS(API서버)

 

2.  프록시 없이 브라우저에서 API서버로 다이렉트로 붙는 구조를 원한다면 Back-end에서 "Response Header" 의 "Access-Control-Allow-Origin" 값에 허용시킬 도메인을 지정한다.

2-1 추가로 도메인이 다른 경우 쿠키도 전송되지 않으므로 back-end에서도 credential:true, front에서도 axios 같은 http 클라이언트 라이브러리에서 widhCredentials: true 를 양측 모두에 값을 설정해줘야한다.

 

경험 상... 아니 단순히 생각해봐도 특별한 케이스가 아닌 이상 1번을 통해 CORS 문제를 해결하는 것이 가장 안전하고 Front, Back 서로 부담이 덜 갈 것이다..

아울러 React나 Vue 로 개발하는  경우 웹팩 config 부분에 proxy 속성이 있는데 여기에 도메인 값을 일치 시키면 문제가 해결된다.