[개인] 카스 전자 저울 연동 Packing List 자동 생성 프로그램 #12 | CORS 허용했는데 CORS 문제로 난감한 상황 해결

| 이슈

비어있는 req.body

카스 전자저울의 mdb 파일이 있는 경로를 영속적으로 관리하기 위해 mdb 파일이 있는 경로를 mdbpath.txt에 text 형식으로 써두고자 하였다. 그래서 프런트단에서 사용자가 입력한 경로 정보를 post 방식으로 백단으로 보내고자 하였다. 그런데 [그림 1]과 같이 CORS 문제가 발생하였다. 문제는 백단인 Node.js에서 이미 프론트단에 해당하는 "http://localhost:8080"를 CORS 허용해 주었음에도 불구하고 이 같은 문제가 발생했다는 것이다.

 

[그림 1] "http://localhost:8080" CORS 허용하였으나 발생한 에러

 

결론부터 말하자면 프론트단에서 post로 data를 서버로 넘길 때 data의 형태가 반드시 객체이어야 한다는 것이다. 그걸 모르고 문자열 형태로 계속 넘기면서 다른 데서 원인을 찾고 있었으니 문제가 해결되지 않았던 것이다. mdbPath를 {}로 싸서 객체로 만들어 주면 되는 것이다. 수정한 코드는 다음과 같다.

async setMdbPath() {
  const mdbPath = this.mdbPath
  console.log(mdbPath)
  await this.$post('/mdbpath', { mdbPath })
}

 

| 다음 단계

프론트단에서 input type=file로 mdb 파일의 경로를 가져오려고 했다. 그런데 보안 정책으로 인해 경로가 "fakepath"로 가려져서 전체 경로를 가져올 수 없었다. electron을 이용하면 이 부분을 해결할 수 있어 보였는데 그 적용은 추후 고려하기로 하고 이번에는-사용자 입장에서는 번거롭겠지만-사용자가 직접 작성하는 방식으로 진행하고자 한다.