1.CORS
웹 브라우저에서 외부 도메인 서버와 통신하기 위한 방식을 표준화한 HTTP 헤더 기반 메커니즘이다.
클라이언트와 서버가 서로 다른 도메인일 경우(HTTP 헤더의 origin이 다른 경우)가 있으므로 CORS 기술이 도입 되었다.
CORS는 웹 브라우저가 만들고 실행하는 도메인이 달라도 리소스에 액세스할 수 있도록 하는 보안 메커니즘이다. (원래는 다르면 안주는 게 맞음)
달라도 줄 것이냐? 말 것이냐? 특정 도메인에만 허락할 것이냐? 모든 도메인에 허락할 것이냐?를 서버가 정한다. (기본은 안줌 웹 브라우저가 막음)
교차 출처 자원 공유(cross-origin-resource-sharing)이라는 이름으로 표준화 되었다.
서버쪽에서 클라이언트를 대상으로 리소스의 허용 여부를 결정하는 방법이다 같은 origin에서 AJAX를 시도하면 CORS 문제가 발생하지 않는다.
클라이언트는 서버가 어떤 origin 요청을 허용하는지는 알 수 없다.
클라이언트에서 요청을 보낸 후, 서버로부터 받은 Access-Control-Allow-Origin 헤더 속성을 통해서 접속 가능 여부를 확인한다.
2.SpringBoot에서 CORS 설정
CORS 설정을위해선 다양한 방법이 있는데 나는 WebMvcConfigurer 를 implements 받아서 적용했다.
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:3000")
.allowedMethods("GET","POST","DELETE","PUT")
.allowCredentials(true);
}
}
react 주소에 해당하는 3000번을 허용했고, 통신 메소드 또한 다 열어줬다
react에서도 proxy 설정을 해주자 내가 만든 API가 잘 전달되고 있었다.
3.느낀점
3주간 주특기 공부를 끝내고 미니 프로젝트에 들어왔다. 기본적인 REST API 구현과 JPA의 활용에 대해서는 충분히 공부했던 것 같다. 이제 활용해보면서 내것으로 만들어야겠다.