메인페이지에서 cors를 우회하여 open api 에서 데이터를 받아오고 신이났지만 router를 이용해 넘어간 다음 페이지에서 404 에러가 날 맞이해주고 있었다.
본능적으로 vue.config.js 에 입력한 proxy가 잘못된 것 같은걸 느꼈지만 console을 찍어볼수도 없는 상황이라 매우 답답했다.
한가지 다른점은 console log 에 찍히는 Request URL 에 router 주소가 추가 되었다는 점 뿐,
메인페이지 api 요청 Request URL
라우터페이지(/product:상품id)
뒤에 붙는 상품id는 어디갔는지 모르겠지만 router 주소가 추가되었다. 몇가지 검색을 해본결과 vue.config.js 파일의 devServer 에 넣어주었던 proxy를 추가하라길래 열심히 새로운 target 으로 '/product', '^/product', '^/product/*' 등을 넣어보았지만 전혀 작동하지 않았고, pathRewrite를 넣어보고, 메인페이지를 입력했던 부분에 같이 넣어보기도 하고 여러가지를 해보았지만 전부 실패, 홧김에 api 요청 url 에 메인페이지의 Request URL 앞부분을 집어 넣으니 허무하게 해결되었다.
이전 api 요청 url
proxy에 입력한 api 요청 url의 앞부분을 제외
curl = `/openapi/OpenApiService.key=${apikey}&apiCode=${apicode}&productCode=${productCode}`해결한 api 요청 url
proxy에 입력한 api 요청 url의 앞부분을 본 api 주소가 아닌 localhost로 입력
curl = `http://localhost:8080/openapi/OpenApiService.key=${apikey}&apiCode=${apicode}&productCode=${productCode}`지금은 devserver 라서 가능한 방법이지만 bulid 하게 될때는 또 다른 방법을 찾아야겠다.
