로컬에서 API테스트 시 Cors 에러 이슈 해결

백단은 닷넷 -> 스프링부트로 컨버팅하는 작업의 1단계가 거의 마무리 되어가는 시점이라 프론트에 연동하는 작업을 시작했다.

 

프론트 도메인은

"http://localhost:3000", "https://localhost:4433"

두 개를 사용한다.

 

백엔드 도메인은

http://localhost:8091/

이다.

 

하나의 api만 변경해서 적용을 해봤는데

어마어마한 cors 에러가 났다..

 

 

CORS의 동작 방식

CORS는 브라우저에 관련된 정책이기 때문에, 클라이언트에서 외부 API 서버로 바로 요청을 보내면 CORS 문제가 발생한다.
즉, 서버에서 서버로 리소스를 요청할 때는 CORS 정책을 위반하지 않고 정상적으로 응답을 받을 수 있다.

그러므로 이 문제를 해결하는 방식은 다음과 같겠다.

• 내 api 서버로의 접근에서 CORS 문제가 발생했을 때
  해당 api 서버에서 Access-Control-Allow-Origin 헤더에 내 Origin(출처)을 명시한다.
  
  
• 외부 api 서버로의 접근에서 CORS 문제가 발생했을 때
  1. 브라우저를 통하지 않고(클라이언트에서 외부 서버로 바로 요청을 하지 않고) 프록시 서버에서 외부 서버로 리소스를 요청한다.
  2. 프록시 기능을 제공하는 라이브러리를 통해 우회한다.
  3. 웹 브라우저 실행 옵션이나 플러그인을 통해 동일 출처 정책(SOP)을 회피한다.

단, 프론트에서는 주로 로컬 환경에 대한 CORS 문제 해결만 가능하고 배포 후에 발생하는 CORS 문제들은 서버 단에서 설정해줘야 한다고 볼 수 있다.

 

 

해결 방법

이를 해결하려면 백엔드에서 CORS 설정을 추가해야 한다.

백엔드에서 CORS 설정을 하는 방법은 두 가지가 있다.

 

1. @CrossOrigin 어노테이션 사용

특정 컨트롤러나 메서드에만 CORS를 허용하려면 @CrossOrigin 어노테이션을 사용할 수 있다.

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class YourController {

    @CrossOrigin(origins = "http://localhost:3000")
    @GetMapping("/your-endpoint")
    public String yourEndpoint() {
        return "CORS 설정 완료!";
    }
}

이 방법은 특정 엔드포인트에 대해서만 CORS를 허용할 때 유용하다.

 

2. 전역 CORS 설정 (전체 API에 대해 허용)

전역으로 CORS 설정을 적용하려면 WebMvcConfigurer를 구현하는 설정 파일을 만들어야 한다.

보통 src/main/java/com/yourapp/config 폴더에 새로운 설정 파일을 추가한다.

파일명 예시: CorsConfig.java

 

import org.springframework.context.annotation.Bean;
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 CorsConfig {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("http://localhost:3000")
                        .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                        .allowedHeaders("*")
                        .allowCredentials(true);
            }
        };
    }
}

이 설정은 모든 엔드포인트에 대해 http://localhost:3000에서의 CORS 요청을 허용한다.

 

 

내 프로젝트의 경우에는 전역 설정이 필요하여 2번의 방법으로 해결하였다.

 

만약 우리 프로젝트처럼 2개 이상의 출처를 사용한다면, allowedOrigins에 이 두 주소를 추가해주면 된다.

import org.springframework.context.annotation.Bean;
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 CorsConfig {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("http://localhost:3000", "https://localhost:4433")  // 두 출처 모두 허용
                        .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                        .allowedHeaders("*")
                        .allowCredentials(true);
            }
        };
    }
}