Cors 에러

프로젝트를 하는 도중 프론트엔드 웹 서버에서 지속적인 Cors에러가 발생하였다. 분명 postman으로 API통신을 보내면 에러가 나지 않았는데, 웹 브라우저를 통해 API통신을 하게 되니 에러가 발생하였다.

Cors란

Cross-Origin Resource Sharing의 약자로 한 도메인 또는 Origin(요청이 시작된 서버의 위치)의 웹 페이지가 다른 도메인을 가진 리소스에 엑세스 할 수 있게하는 보안 정책이다. Cors가 발생하는 이유는 SOP(Same-Origin Policy, 동일 출처 정책)인데, 서로 다른 도메인, 포트의 서버로 요청이 갈 때 발생한다.
프론트엔드에서 사용하는 리엑트는 3000포트, 백엔드에서 사용하는 스프링부트는 8080포트를 사용하기에 이 같은 에러가 발생하였다.

Cors 해결하기

Cors는 생각보다 간단하게 해결할 수 있는데 컨트롤러에 @CrossOrigin 어노테이션을 사용하거나 WebMvcConfigurer에서 설정하는 방법이 있다.

1. CrossOrigin

@CrossOrigin(origins = "http://localhost:8080",allowedHeaders = "*")
@RestController
@RequestMapping("/")
public class ApiController {

    @GetMapping
    public String hello(){
        return "hello";
    }
}

2. WebMvcConfigurer

@Configuration
public class WebConfig implements WebMvcConfigurer {
    public static final String ALLOWED_METHOD_NAMES = "GET,HEAD,POST,PUT,DELETE,TRACE,OPTIONS,PATCH";

    @Override
    public void addCorsMappings(final CorsRegistry registry) {
        registry.addMapping("/**")
        		.allowedOrigins("http://localhost:8080",
                        "http://localhost:3000",
                        "https://localhost:3000",
                        "https://127.0.0.1:3000"
                )
                .allowedMethods(ALLOWED_METHOD_NAMES.split(","));
    }
}

컨트롤러마다 @CrossOrigin을 지정하기 보단 configuration에서 지정하는 편이 더욱 간편하다.

추가로 로컬 환경을 서버로 사용하는 ngrok을 사용하면 이 같은 조치에도 계속 Cors가 떠서 빠르게 ec2를 통해 배포하는 것이 좋다.