[CORS 오류] 프론트에서 api 호출 시 CORS 오류 발생

2025.09.15 - [프로젝트/트러블슈팅] - [Docker/EC2] 배포한 서버가 수정된 코드로 반영되지 않던 이유

[Docker/EC2] 배포한 서버가 수정된 코드로 반영되지 않던 이유

위 프로젝트를 진행하며 생긴 또 다른 문제인 CORS 오류에 대한 기록이다.

---

문제 상황

프론트에서 백엔드 API 호출 시 아래 오류가 발생했다.

Access to fetch at '<https://4264-134-75-39-23.ngrok-free.app/api/home/detail?userId=1&date=2025-06-11>' 
from origin '' has been blocked by CORS policy: Response to preflight 
request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested 
resource.Understand this error

 

항상 백엔드 서버는 EC2에 배포했었다.

근데 이번에는 수업 도중 프론트 파트원이 급하게 api를 쓸 수 있냐고 요청하여,

로컬 서버를 ngrok을 사용해서 외부에 노출하였다.

 

로컬에서 배포한 api를 프론트에서 테스트 하기 위해 api 요청을 보냈는데 CORS 오류가 발생했다.

 

오류 해결을 위해 CORS 설정을 추가하였지만 문제가 지속되어, ngrok 무료 버전의 문제라고 생각했다.

하지만, EC2로 배포해도 동일한 오류가 발생했다.

 

여기서 문제가 EC2로 배포하면서, ngrok의 문제인줄 알고, 앞서 추가해둔 CORS 설정 코드를 제거했다는 거다..ㅎㅎ

 

다시 CORS 허용 설정을 추가해주니, 문제가 해결됐다.

 

해결 방법 | CORS 허용 설정

package com.example.accountbook;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration 
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 모든 경로에 대해 CORS를 적용
                .allowedOrigins("<http://localhost:3000>") // 허용할 프론트엔드 URL
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 허용할 HTTP 메서드.
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600); 
    }
}

 

이후 프론트 요청이 정상적으로 동작했다.

 

+ 현재는 프론트엔드가 로컬에서 테스트 함으로 프론트 로컬 url을 허용해줬다.
만약 배포를 한다면 배포된 url만 허용하는게 안전하다.