[코디'ing] cors 문제를 해결해보자

공모전을 진행하며 프론트엔드와 협업하는 과정에서 aws ec2를 사용했었는데 이미지 파일 업로드나 지피티 사용에서 cors문제가 발생하였다.

📚 cors 란? Cross Origin Resource Sharing의 약자로, 추가 HTTP 헤더를 사용하여 서로 다른 출처(도메인, 프로토콜, 포트)에 있는 웹 페이지나 서버가 서로의 자원에 접근할 수 있도록 허용하는 보안 메커니즘이다.

해결하는 방법은 https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F 님 글을 참고하였다.

우리는
1. webconfig 를 사용하였다.

WebConfig.java

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000") // 프론트엔드 url
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true);

    }
}

2. 프록시 서버를 사용하였다.(프론트)

3. https://velog.io/@kimsehwan96/S3-CORS-%ED%97%A4%EB%8D%94-%EA%B4%80%EB%A0%A8-%EC%9D%B4%EC%8A%88-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95-html2canvas-lottie 님을 참고해 aws에 cors 설정을 하였다 (해결)