[Vue.js] xhr.js?1a5c:210 GET http://**/api/support/devInquryList 404 (Not Found) & CORS Error

 

⚠️ 문제 발생!

Q&A 게시판 목록 조회

 

분명 axio도 설치 했고, API도 만들었고, router 기능도 넣어줬는데, 왜 Back End 와 Front End는 만나지 못하고, 이러고 있을까요?

 

 

🤔 원인 분석

 

곰곰히 생각 해보니 주니하랑은 또 하나를 빠뜨린 것이에요. 바로 Vue에 URL 설정을 하지 않은 것이에요.

axios에 Back End URI는 설정 해 놓고, 정작 접두사를 빼 먹었으니 당연히 Front End는 '그래서 어디로 가라는 거지?'를 하고 있는 것이에요.

일단 근본적인 원인을 찾기 위해 API 쪽에 하드코딩을 해보기로 한 것이에요.

devInquryApi.js

 

 

 

이렇게 해 주니 Front가 Back End를 만나러 가긴 했는데, Back End가 매몰차게 거절한 것 같은 것이에요. 바로 CORS Error가 발생한 것이에요. 

 

이번에는 vue.config.js를 좀 수정 해 보기로 한 것이에요.

 

vue.config.js

 

 

 

하지만 문제가 계속 발생 되고 있는 것이에요 🥲

 

 

 

 

🍻 문제 해결!

위의 문제는 크게 두 가지 문제 때문에 발생한 것이에요.
먼저 주니하랑이 코딩한 `devInquryList.vue`에서는 axios를 통해 Back End에게 Get으로 요청을 보내고 있는데,

 

Data() 에서 Back End에게 보낼 파라미터 변수들을 위와 같이 만들어 주고,

 

 

searchList() 라는 곳에서 devInqrutyList에 위에서 설정한 파라미터값들을 넣고, 호출을 하게 되면 

 

devInquryApi.js

 

axios를 설정하는 곳에 위치한 해당 Method에 파라미터값이 전달되면서 동작하는 것이에요.
주니하랑은 위에서 'get'을 했는데, `data: params`를 해주게 되면 Request Body에 값을 넣어 요청을 보내게 되는 것이에요.

 

출처 : https://www.w3schools.com/tags/ref_httpmethods.asp

반응형

 

Get Method는 위와 같이 URL을 통해서 요청을 전달하는 Query String 등을 이용해야 하는데, Request Body에다가 계속 값을 넣어서 보내려고 했던 것이에요.

 

물론 조회는 Get을 통해서 요청하는 것이 맞고, 해당 Losic을 Get에 맞게 수정하는 것이 맞지만, 일단 이대로 진행을 해 보려고 하는 것이에요. 

 

Back End - devInqquryList Controller Method

 

Back End에서도 원래는 Get 방식으로 설정을 해 두었는데, 위와 같이 Pos로 변경을 해 준 것이에요.

 

 

두번째 문제는 바로 CORS Error인 것이에요. 

Back End WebConfig.java

 

WebMvcConfigurer를 구현한 Class를 하나 만들고, addCorsMappings라는 Method를 Override하여 상황에 맞게 설정을 해 주면 되는데, addMapping을 통해 Pattern 형식으로 URL을 설정하여 해당 URL에 대해 CORS를 적용할 수 있으며,

addowedOrigins를 통해 자원 공유를 허락할 Origins를 허용할 수 있는데, 쉽게 말해 Back End Server에 접속을 허용할 Client의 URL을 넣어주면 되는 것이에요.

마지막 allowedMethod는 Client에서 요청시에 사용할 HTTP Method 중에 허용할 것만 골라서 허용을 시켜줄 수 있는 것이에요.

 

 

 

 

이렇게 목록이 잘 출력되는 것을 확인할 수 있는 것이에요!