compile 사용 시 이중 인코딩 문제

서비스함수

 

파일 목록 조회, 업로드, 삭제 할 수 있는 type 파일과 서버액션, 서비스함수를 작성하고 

해당 view에서 삭제 버튼을 클릭 해 삭제요청이 실행되도록 했는데 계속 응답으로 빈 객체가 나왔다,,

(정상적으로는 true나 false 응답을 받아야함! 삭제 응답 API 타입이 boolean이기 때문)

계속 이것 저것 해보다가 서비스파일에서 삭제 요청 경로를 console로 확인 해보니 이 부분이 문제였다.

 

// /admin_api/children/:id/files/:objectKey 요청경로
pathToUrl(CHILD_ADMIN_FILE_ROUTES.GET_CHILD_ADMIN_FILES, path)

 

여기서 path로 objectKey를 전달하는데 이 objectKey에 한글이나 특수문자가 포함된다.

그리고 pathToUrl 함수 안에서 path-to-regexp의 compile을 사용해 URL을 생성하는데 이 compile은 파라미터 값에 

encodeURIComponent를 적용해 인코딩을 해준다고 한다.

문제는 HTTP 요청시에 HTTP 클라이언트 라이브러리에서 자체적으로 URL을 인코딩해주기 때문에

compile로 인코딩된 경로를 또 인코딩하게 되는 것...

 

 

그래서 console로 요청 경로를 확인해보면

/admin_api/children/2e073d6e-ff39-445e-b35c-43fe8066f04f/files/customerFile%2Fc718f792-3c5d-4d17-95c1-9ec703acb906%2FprofileImageTest.jpg

저 customFile 뒤에 / 슬래시가 붙어야하는데 슬래시를 또 인코딩 한 %2F 가 붙은 걸 확인할 수 있다..

 

 

이렇게  compile 사용하지 않게 경로를 직접 적어주고 console로 확인해보면

/admin_api/children/2e073d6e-ff39-445e-b35c-43fe8066f04f/files/customerFile/c718f792-3c5d-4d17-95c1-9ec703acb906/profileImageTest.jpg

customFile 뒤 / 슬래시가 제대로 있는 걸로 보아 경로를 올바르게 설정하는 것을 알 수 있다!

 

---

 

📝 교훈 

 

1. 요청이 제대로 안되면 서비스함수에서 요청 경로를 올바르게 보내고 있는지 먼저 확인할 것..!  ⭐

2. compile은 URL을 자체적으로 인코딩 해준다.

3. HTTP 요청 시에도 URL을 자체적으로 인코딩 해준다. 그러니 이중 인코딩 주의!