[트러블슈팅] CORS 문제 해결 하기 : 실제 원인은 CORS가 아닌 무한 재귀 호출

프론트엔드와 백엔드 간의 API 통신에서 발생하는 CORS 문제는 흔한 이슈 중 하나입니다. 그러나 CORS 문제로 보이는 현상이 실제로는 다른 문제에서 기인하는 경우도 많습니다. 이번 사례에서는 CORS 에러로 오해된 문제의 실제 원인을 설명하고 해결 과정을 공유합니다.🙂

 

✔️ CORS란?

CORS(Cross-Origin Resource Sharing)는 브라우저가 다른 도메인 간에 리소스를 요청할 때 보안을 위해 사용하는 정책입니다. 다른 출처(도메인, 포트, 프로토콜)의 요청을 차단하며, 이를 허용하려면 서버에서 CORS 설정을 통해 특정 출처를 허용해야 합니다.

 

✔️ 문제 상황

프론트엔드에서 서버에 API를 요청할 때, CORS 에러가 발생했다고 생각했지만, 실제로는 CORS가 원인이 아니었습니다. JPA와 JPQL을 사용하여 양방향 관계를 설정한 엔티티들 간의 무한 재귀 호출이 원인이었습니다. 이는 직렬화 과정에서 발생하는 문제로, 무한 루프가 서버 응답을 방해하며 CORS 에러로 혼동될 수 있었습니다.

 

💡 직렬화란?

직렬화(Serialization)는 객체를 네트워크 전송이나 파일 저장 등에서 사용할 수 있도록 JSON 또는 XML 같은 데이터 형식으로 변환하는 과정입니다. 하지만 객체 간에 양방향 참조가 있을 경우, 직렬화 과정에서 무한 루프가 발생할 수 있습니다.

 

✔️ 무한 재귀 호출이 실제 원인

JPA에서 양방향 관계를 설정할 때, JPQL 쿼리로 데이터를 조회하면 엔티티들이 서로를 계속 참조하여 무한 재귀 호출이 발생할 수 있습니다. 이 문제는 직렬화 과정에서 스택 오버플로우와 같은 오류를 일으켜 서버가 응답하지 못하게 만들고, 프론트엔드에서 응답을 기다리다가 CORS와 관련된 오류처럼 보이게 됩니다.

 

✔️ 해결 방법

이 문제는 @JsonIgnore 어노테이션을 사용하여 해결할 수 있습니다. 양방향 관계에 있는 객체들 중 하나의 필드를 직렬화 과정에서 제외함으로써, 무한 재귀 호출을 방지할 수 있습니다. JPA 엔티티의 직렬화 시, @JsonIgnore를 사용하여 무한 루프를 차단하면 서버 응답이 정상적으로 처리됩니다.

 

또 다른 방법으로는 @JsonManagedReference와 @JsonBackReference를 사용하여 직렬화 방향을 명시적으로 설정할 수 있습니다. @JsonManagedReference는 직렬화가 시작되는 쪽을 표시하고, @JsonBackReference는 직렬화에서 제외되는 쪽을 설정합니다.

@Entity
public class User {
    @OneToMany(mappedBy = "user")
    @JsonManagedReference
    private List<Order> orders;
}

@Entity
public class Order {
    @ManyToOne
    @JsonBackReference
    private User user;
}

차이 요약

• @JsonIgnore는 특정 필드를 완전히 직렬화에서 제외합니다. 즉, 무한 재귀 문제를 해결하는 매우 단순한 방법이지만, 해당 필드 데이터를 클라이언트에 보내지 않습니다.
• @JsonManagedReference와 @JsonBackReference는 직렬화 방향을 명시적으로 설정하여 양방향 관계를 유지하면서도 무한 루프 문제를 방지합니다. 데이터를 좀 더 세밀하게 조절할 수 있지만 설정이 다소 복잡할 수 있습니다.

 

✔️ 결론

API 호출 시 발생한 문제는 처음에 CORS 에러처럼 보였지만, 실제 원인은 JPA 양방향 관계의 무한 재귀 호출이었습니다. 이를 해결하기 위해 @JsonIgnore 또는 @JsonManagedReference와 @JsonBackReference를 사용하여 직렬화 문제를 해결하고, 서버 응답을 정상화했습니다. 유사한 문제 발생 시, CORS 문제가 아니라 JPA 및 JPQL의 양방향 관계 설정을 먼저 점검하는 것이 중요합니다.👍🏻