백엔드와 프론트가 분리된 환경일 때 CORS 문제 해결하기

백엔드와 프론트가 분리된 환경일때 CORS 관련 문제가 발생한다.

도메인이 다르기 때문이다.

 

CORS란?

CORS란 도메인이 다른 리소스끼리 통신할때 보안을 위해 만들어진 정책이다. 개발할 때는 프론트와 백엔드의 도메인이 각기 다르다. 예를 들어 react는 localhost:3000을 사용하고, spring boot는 localhost:8080을 사용한다. 그래서 CORS에러가 난다.

 

---

 

CORS 문제 해결법

이를 해결하기 위해서는 세가지 방법이 있다.

 

방법1) 백엔드에서 직접 해결하기

Spring boot에서 직접 CORS 관련 설정하여 해제시키는 방법이다.

아래 링크를 참고하자.

https://hoehen-flug.tistory.com/58

[Spring Boot] CORS 설정 방법 2가지( (+) IllegalArgumentException: When allowCredentials is true, allowedOrigins cannot con

 

 

방법2) 웹서버 Nginx로 해결하기

웹서버인 Nginx를 통해 단일 도메인으로 보이게 설정하는 방법이다.

외부 서버를 사용할때 주로 이용한다.

아래 링크를 참고하자.

https://annyeong46.tistory.com/71

백엔드와 프론트가 분리된 환경일 때 CORS 문제 해결하기 - 방법2) 웹서버 Nginx로 해결하기

 

 

방법3) 프론트엔드에서 직접 해결하기 (권장 x)

프론트엔트 서버에서 프록시 설정코드를 작성하여 백엔드 도메인을 따르는 방법이다.

이 경우 브라우저가 아닌 다른 클라이언트(ex. 모바일 앱, Postman 등)에서는 문제가 해결되지 않으므로 권장하지 않는다.

그럼에도 불구하고 이 방법을 사용한다면 아래 링크를 참고하자.

https://annyeong46.tistory.com/70

백엔드와 프론트가 분리된 환경일 때 CORS 문제 해결하기 - 방법3) 프론트엔드(React)에서 직접 해결