포트폴리오를 준비하면서 api를 이용해 data를 호출하는 상황이 되었다.
data는 json으로 만든 단순 객체형식이었고 로컬에서는 정상적으로 호출되는 것을 확인 할 수 있었다.!
자 그러면 data를 서버에 올리고 다시 호출해볼까?
호스팅서버에 json파일을 올린 이후, api를 매번 변경하지 않아도 로컬호스트와 서버에서 둘다 작동하게 하기 위해서 꼼수를 생각해봤다.
axios에서 testMode라는 변수를 만들고,config에서 baseUrl을 설정했다.
👉🏻예상: testMode를 false로 변경하면 서버에서는 baseUrl이 도메인으로 변경되겠지!
👉🏻실제동작 : ERROR
COLS에러가 떴다.
이전 직장에서 경험했던 바로는 요청HEADER와 응답HEADER가 달라서 생기는 오류로 기억하고 있는데, 이경우 proxy를 사용하면 된다는 글을 본 적이 있어서 시도해보았다.
마침 친절하게도 콘솔에는 'Access-Control-Allow-Origin'이 없다는 메세지가 있었고, 이걸 헤더에 추가하면 해결될 것이라고 생각했다.
네크워크에서 확인했을 때 확실히 'Access-Control-Allow-Origin'이 없다.
PROXY를 추가하면...?
내가 사용한 프레임워크는 vue3기반의 quasar였으므로, quasar.config.js에서 devServer안에 proxy와 header를 추가했다. (퀘이사 공식문서를 참고했다.)
하지만 이것도 실패.
조금더 찾아보니 내가 사용하고 있는 호스팅서버에서 방화벽으로 외부의 접근은 차단하기 때문에 문의를 넣어야한다는 글을 읽었다.
그리고 다시 시도해보았지만...🤦🏻♀️
결국 api는 호스팅서버를 호출해서 데이터를 가져오는 것으로 했다.
고생한 것에 비해서 결과가 좋지 못한게 마음이 안좋다.
학원출신 비전공자의 한계가 느껴지는 순간이었다. 공부가 더 필요한 순간이다.
✨COLS에러에 관해서 정말 잘 정리되어있는 글을 발견했다!
🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏
일단 포트폴리오는 BUILD한 상태에서 보완하며 계속 공부하고 기록해보기로 했다.
