어찌저찌 AWS EC2로 서버를 구축하고 이제 프론트분들과 협업을 하는가 했더니...!!!! Cors에러를 해결해달라는 요청을 받았다.

CORS란

Cross-Origin Resource Sharing (CORS)

CORS는 한 도메인 또는 Origin의 웹 페이지가 다른 도메인 (도메인 간 요청)을 가진 리소스에 액세스 할 수 있게하는 보안 메커니즘이다.

SOP(Same-Origin Policy)

CORS에러는 브라우저에서 서로 다른 도메인/ 포트의 서버로 요청이갈때 브라우저에서 발생한다.

이것을 동일 출처 정책이라고 한다.
동일 출처 정책은 동일한 출처의 리소스에만 접근하도록 제한하는 것이다. 여기서 출처는 프로토콜, 호스트명, 포트가 같다는 것을 의미한다.

출처는 프로토콜, 호스트, 포트 조합으로 되어있으며 이 중 하나라도 다를 시 동일 출처로 보지 않는다

해결방법

1. 프록시 설정

나의경우 프론트분들은 프록시를 설정을 해주셨다.
직접 통신하지 못하는 두 개의 컴퓨터 사이에서 서로 통신할 수 있도록 돕는 역할을 가리켜 프록시라 일컫는다.

하지만 POST, DELETE 요청에서 CORS에러가 났고 스프링부트에서 추가 설정이 필요했다.

2. 스프링부트 설정

스프링부트로는 해결하기 위해서는 @CrossOrigin 어노테이션을 사용하면 된다.

API Config

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

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

}

webConfig

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry){
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8080", "http://{aws주소}:8080",
                        "http://localhost:3000",
                        "https://localhost:3000",
                        "https://127.0.0.1:3000"
                )
                .allowedMethods("GET", "POST", "PUT", "DELETE")
        ;

    }

}

프론트분들은 리엑트를 주로 사용하셨는데 이때 호스트를 localhost:3000번을 주로 사용하셨고, 나의 경우 {aws host}:8080번을 사용했기때문에 CORS에러가 난것으로 보인다. 따라서 두 주소를 Origins에 허용할수 있도록 하였다.

추가적으로 GET, POST, DELETE, PUT 기능의 에러가 나서 메서드 허용을 추가했다.

참고자료

https://valuefactory.tistory.com/1141
https://bohyeon-n.github.io/deploy/web/cors.html
https://velog.io/@yejinh/CORS-4tk536f0db
https://intrepidgeeks.com/tutorial/cors-error-and-sop
https://dev-pengun.tistory.com/entry/Spring-Boot-CORS-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0
https://oopsys.tistory.com/266