#CORS

CORS 체크 방법

cors란? -> cors란?

간단정리 : CORS (Cross Origin Resource Sharing) - 안전한 Origin들의 SOP 보안정책을 풀어줌

그렇다면 origin이란? - Hostname, port, Uri의 조합

직접! 모질라형들이 정리해둔 글을 읽어보자

아래의 코드가 있다고 가정한 후 우리가 로컬에서 테스트시 postman이나 스웨거를 통해 테스트 할때는 너무나도 당연히 ok라는 값을 받는다. 그러면 front는 잘받을가?

1
2
3
4
5
6
7
8
9
@RequestMapping("/v1/sample")
public class SampleController {
    
    @GetMapping
    public String test() {
        return "ok";
    }

}

아래의 curl을 활용하여 테스트 해보자

1
2
3
4
5
curl -I -X OPTIONS \
  -H "Origin: http://127.0.0.1:5003" \
  -H 'Access-Control-Request-Method: GET' \
  -H 'Content-Type: application/json' \
  http://localhost:9001/v1/sample 2>&1 | grep 'Access-Control-Allow-Origin'

서버의 port는 8080, 프론트가 사용하는 port는 5003이다.(물론 호스트명과 포트가 같게 셋팅되어있으면 우리는 쉽게 넘어갈수 있다.)
위의 curl을 터미널에서 실행시 아무런 값도 나오지 않는다. 아무런 값이 나오지 않는 다는 것은 cross origin 에러는 크롬 검사도구 등에서 발견할수 있다.

아래처럼 @CrossOrigin를 추가하게 되면 해당 엔드포인트 전역을 허용해준다.

1
2
3
4
5
6
7
8
9
10
@CrossOrigin
@RequestMapping("/v1/sample")
public class SampleController {

    @GetMapping
    public String test() {
        return "ok";
    }

}

위의 curl을 실행하면 Access-Control-Allow-Origin: * 전부를 허용함을 확인할수 있다.

아.. 그냥 curl을 통해 cors확인하는 방법만 적으려고 했는데 블로그가 길어지고 있다…

특정 origin만 cors 허용시

아래의 코드를 작성 후 실행

1
2
3
4
5
6
7
8
@Configuration
public class WebCorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("http://127.0.0.1:5003");
    }
}

위의 curl을 실행하게되면 Access-Control-Allow-Origin: http://127.0.0.1:5003 결과를 얻을수 있다.

결론

프론트 개발자들과 개발을 진행하다가 cors확인 부탁드려요 하면 직접 front자리에 가거나 front 코드를 실행하지 않고도 아래의 스크립트를 잘 활용하자!

1
2
3
4
5
curl -I -X OPTIONS \
  -H "Origin: http://127.0.0.1:5003" \
  -H 'Access-Control-Request-Method: GET' \
  -H 'Content-Type: application/json' \
  http://localhost:9001/v1/sample 2>&1 | grep 'Access-Control-Allow-Origin'
#CORS