Plmography 프로젝트 작업 로그 #48 - response for preflight has invalid (23.02.07 TIL)

프론트에서 스토어 테스트를 하던 도중 테스트는 다 통과하는데 아래 경고 문구가 떴다.

response for preflight has invalid http status code 400

다른 스토어 테스트들에는 나타나지 않는 경고라서 테스트를 하나씩 주석으로 지워가면서 어떤 코드가 문제인지 살펴보다가, 어떤 한 메소드 때문에 이 문구가 뜨는 것을 발견했다. 로직은 다른 테스트 로직과 별 다른 게 없어서 그것 때문은 아닌 것 같았다. 

일단 preflight 은 너무 예전에 봤던 개념이라 다시 한 번 찾아보았다.

Preflight 은 더 효율적인 통신을 위함과 관련이 깊다.
 
만약 우리가 엄청난 데이터를 서버로 보낸다고 가정하자.
 
그래서 Front 에서 여러 처리를 한 뒤, 열심히 Body 에 데이터를 파싱하고 담았다.
 
하지만 서버가 POST 요청을 허용하지 않는다면..?
 
그럼 데이터를 Network Byte Order 로 바꾸는 등 여러 과정을 거친 것들이 허무하게 사라져 버리게 된다..
 
이를 방지하기 위해서 서버에서 어떤 메서드와 어떤 header 를 허용하는지 확인하는 과정이 필요하게 되었고, 그 과정을 바로 Preflight 에서 수행한다.

우리가 특정 Http Method 로 요청을 보내게 된다면 해당 서버로 OPTIONS 를 미리 보내보고 해당 응답을 확인한 후, 우리가 보낸 Http Method 가 지원하면 실제 요청이 이뤄지게 되는 것이다.

OPTIONS 로 미리 요청을 보내서 확인을 하는 과정 도중에 생겨난 에러인가? 싶어서 이 메서드가 연결되어 있는 백엔드 쪽에서 작성한 api 를 살펴보았다.

@PatchMapping("/{postId}")
public PostModificationResponseDto modify(
        @RequestAttribute Long userId,
        @PathVariable Long postId,
        @RequestBody PostModificationRequestDto postModificationRequestDto
) {
    return patchPostService.modify(userId, postId, postModificationRequestDto);
}

@PatchMapping("/{postId}/hit")
public UpdateHitPostResponseDto updateHit(@PathVariable Long postId) {
    return patchPostService.updateHit(postId);
}

이게 바로 그 경고 문구의 원인이 되었던 api 인데..http 메서드도 patch 로 같고, 중간에 리소스도 postId 를 사용하기 때문에 프론트에서 요청을 보내는 도중에 딱 저 중간 리소스를 만났을 때 어느 api 를 사용할 지 몰라 오류가 나는 것일까, 싶어서 아래처럼 uri 를 살짝 바꿔보았다.

@PatchMapping("/{postId}")
public PostModificationResponseDto modify
    

@PatchMapping("/hit/{postId}")
public UpdateHitPostResponseDto updateHit(@PathVariable Long postId)

그랬더니 경고 문구는 사라졌다. 같은 중간 리소스를 사용해서 경고를 발생시킨다는 것도 사실 나의 추측이고, 엄연히 uri 가 다른데 왜 경고를 띄우는 것인지 아직 확실한 해답은 찾지 못했다. 구현이 우선이므로 이렇게만 하고 일단 넘어가고 다음에 데모를 만들어서 확실하게 테스트를 해봐야 할 것 같다.