Vue.js - Spring Restful API 활용하기 [CrossOrigin(cors) 해결]

 

Vue.js를 공부하면서,

RestAPI를 이용하기 위해서 Spring Boot를 이용하여 Restful API를 활용해보도록 하겠습니다.

 

프로젝트를 새로 만들어야 하지만,

현재 갖고 있는 웹 프로젝트로 한번 해보도록 하겠습니다.

 

Spring Boot와 통신하면서 CrossOrigin(cors) 오류가 나서 조금 시간이 걸렸는데요.

해결방법도 공유하겠습니다.

 

 

구조 : 

- Vue : localhost:8088

- Spring : localhost:8000

---

1. Vue.js

 

axios를 통해 Spring 으로 작성된 컨트롤러를 호출하겠습니다.

console.log(result)를 통하여 결과 값을 확인하겠습니다.

Script 소스를 아래와 같이 작성하였는데,

header 부분에 아래와 같이 작성해주세요.

    getTodos () {
      this.$http.get('http://localhost:8080/controller/getTICKET_LIST', {
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Content-Type': 'application/json; charset = utf-8'
        }
      })

 

method 부분에 axios를 이용하여 함수를 만들어 주고,

 

mounted 는 Vue 구성된 후 호출할 함수를 작성하면 됩니다.

위에서 만든 getTodos 함수를 호출하도록 하였습니다.

 

 

<script>
export default {
  name: 'todoPage',
  data () {
  },
  methods: {
    deleteTodo (i) {
      this.todos.splice(i, 1)
    },
    createTodo (name) {
      if (name != null) {
        this.todos.push({name: name})
        this.name = null
      }
    },
    getTodos () {
      this.$http.get('http://localhost:8080/controller/getTICKET_LIST', {
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Content-Type': 'application/json; charset = utf-8'
        }
      })
        .then((result) => {
          console.log(result)
        })
        .catch(e => {
          console.log('error:', e)
        })
    }
  },
  mounted () {
    this.getTodos()
  }
}
</script>

 

 

---

 

 

2. Spring

 

Spring에는 간단하게 Cross Origin을 해결할 수 있는 어노테이션을 갖고 있는데요. 참 여기서 중요한 것이 있습니다.

전제조건이 있다는 것을 아무도 알려주지 않아 왜 오류가 나지? 계속 한참을 헤매었네요.

 

- @RestController : Spring 4.x 이상

- @CrossOrigin : Spring 4.2 이상

 

위 조건을 찾는데 시간이 조금 걸렸네요.

이 조건이 갖추어져 있지 않으면 어노테이션을 생성하라고 나옵니다.

삽질하는 사람들이 없길.. 

 

위 두 개의 어노테이션만 입력해주면 Cross Origin 오류를 간단히 해결할 수 있습니다.

 

 

 

 

Vue.js 에서 호출해보도록 하겠습니다.

짜잔 ! 정상적으로 호출되어 조회하고 싶은 값을 전달받았습니다.

 

전달받은 값으로 이제 웹페이지를 구성해보도록 하겠습니다.

즐코딩 :)

 

 

---