Vue.js로 웹페이지 리빌드하기 - (10) vue에서 springboot api 불러오기

이제 vue에서 java api를 불러오려고 합니다.

일단 자바 소스를 rest api용으로 수정해야하는데, 자바쪽 컨트롤러를 수정합니다.

 

/**
 * 화면 컨트롤러
 */
@RequiredArgsConstructor
@Controller
public class IndexController {
    // 알리미 추가 및 수정 화면 요청
    @GetMapping("/menuInfoRegister")
    public String menuInfoRegister(Model model) {
        // 화면에 돌려주는 모델에 리스트 데이터를 담음
        model.addAttribute("posts", listLoadService.getInfoRegisterList());
        return "menuInfoRegister";
    }
}

현재 자바 컨트롤러.

기본적으로 mustache를 불러오는 형식으로 되어있어서, mustache 파일명을 리턴해줍니다.

데이터는 model 객체에 끼워서 넘겨주는 형식으로 되어있는데,

이 형식은 그대로 가져가되, rest api 로 바꿔주기만 할 것입니다.

 

덧붙여서, 지금 상태로 get형식의 menuInfoRegister를 호출하게 되면 자바쪽에서부터 에러가 나며, 

vue쪽에서도 당연하게 에러가 납니다. 503 에러를 뱉더군요.

 

/**
 * get api 요청을 수신하는 컨트롤러
 */
@RequiredArgsConstructor
@RestController
public class GetApiController {

    // 목록 화면 불러오기 용 서비스
    private final ListLoadService listLoadService;

    // 알리미 추가 및 수정 화면 요청
    @GetMapping("/menuInfoRegister")
    public void menuInfoRegister(Model model) {
        // 화면에 돌려주는 모델에 리스트 데이터를 담음
        model.addAttribute("posts", listLoadService.getInfoRegisterList());
    }
}

그렇게 만든 rest api 컨트롤러. 

딱히 별로 해준 건 없으므로, 이대로 서버를 실행해 api를 불러와보겠습니다.

 

          this.axios.get("menuInfoRegister")
                      .then((res) => {
                        console.log(res);
                        console.log(res.data);
                      })
                      .catch((error) => {
                        console.log(error);
                      });

axios 설정은 따로 포스팅을 하고, 부르는 코드는 이렇습니다.

그리고, 이 코드를 사용해 api를 호출해보면..

 

무사히 api를 불러내는 거까진 하는게 확인되었습니다.

 

그런데, vue에서 에러가 나고 있네요.

http 코드는 200으로 정상 처리가 되어 돌아오지만,

axios는 에러가 나고, 에러코드가 검출.. 

네트워크 에러라고 하는군요. 

 

Access to XMLHttpRequest at 'http://localhost:8080/menuInfoRegister' from origin 'http://localhost:9091' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

일단 이 에러를 해결 해야겠네요.

처음엔 버튼 누르기 위해 onClick를 쓰는 것부터 에러가 가서 머리가 아팠는데,

1시간 열심히 만졌더니 quasar의 q-item에서는 onClick가 아니라 @click를 써야한다고..

기본 vue에서는 써지는 걸로 알고있는데, 좀 더 문법에 엄격해진 느낌이더라구요.

잠시 다른 이야기였고, 

 

CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

는 http요청에서 CORS라는, 다른 api서버에 연결 할 때 필요한 권한에 대한 문제라고 하네요.

 

저의 경우엔 8080포트를 쓰는 로컬서버가 api 서버,9091포트를 쓰고있는 서버가 vue, 즉 클라이언트 서버인데이 둘의 포트번호가 다른 관계로 요청한 주소가 다른데 이거 권한도 없네? 그럼 에러~라고 하면서 튕겨져 나가는 것이었습니다.

 

같은 문제를 아래의 포스팅에서도 이야기하고 있습니다.

https://velog.io/@gomdori5505/CORS-%EB%8F%84%EB%A9%94%EC%9D%B8-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0

🛠 CORS 도메인 문제 해결

해결 방법으로는 헤더 안의 'Access-Control-Allow-Origin' 부분을 허용시켜주는 방법,

proxy 설정을 이용해 현재 서버와 같은 것처럼 보이게 하는 것. (속이기)

저는 후자의 방법을 선택해서, vue.config.js에 프록시 부분을 아래와 같이 수정해주었습니다.

 

// 기존
devServer: {
    port: 9091,
    proxy: "http://localhost:9191"
    }
  },
  
// 수정
devServer: {
    port: 9091,
    proxy: {
      '/api': {
        target: "http://localhost:8080",
        changeOrigin: true,
      }
    }
  },

(혹시 없다면 만들어주시면 됩니다.)

/api로 시작하는 요청이 들어올 시엔 target안의 주소로 바꿔라~ 라는 형식입니다.

그런데 에러는 여전히 나고 있더군요.

이번에는 범인을 바로 찾았습니다.

 

// axios
axios.defaults.baseURL = 'http://localhost:8080'

const app = createApp(App);
app.config.globalProperties.axios = axios;
app.use(Quasar, quasarUserOptions)
    .use(router).use(storage).mount('#app')
    
// main.js 의 axios 설정부

baseURL을 설정하는 바람에, 여러가지 충돌도 나고 프록시도 제대로 작동안하는 사태가 발생..

이 부분을 지워주게 되면, 

 

제대로 요청이 오고가고 하는걸 확인 할 수 있게 됩니다.

 

 

api 연결도 잘 되는걸 확인 했으니 이제 빠르게 남은 부분을 정리해야겠습니다.