[Node.js + Vue.js] axios 통신, cors모듈

Front(Vue.js) - Back(Node.js) 간의 axios 통신

• Front 서버와 Back 서버가 서로 통신하며 데이터를 주고받을 때 사용하는 axios 통신 예제
• 최대한 간단하게 하기위해 Front 서버에서 숫자를 입력받고 버튼을 누르면 그 숫자가 Back 서버로 전송되고, Back 서버에서는 그 숫자를 받고 잘 받았다는 메세지를 Front 서버에 전송하는 예제

app.vue(front) 설계

1. 'npm i axios'를 통해 axios 모듈 설치
2. v-text-field에 숫자(number)를 입력받고 버튼을 누르면 send() 메소드로 가게 됨
3. axios 통신으로 number를 back 서버에 전송

main.js(back) 설계

1. 'npm i axios cors'를 통해 axios 모듈과 cors 모듈 설치
2. front에서 post 방식으로 전송할 것을 알기때문에, post로 받음
3. 전송받은 숫자가 잘 왔는지 확인하기 위해 console에 출력
4. front로 '잘 받음'이라는 message 전송

cors 모듈이란?

• Node.js에서 다른 서버가 리소스를 요청하면 보안상의 이유로 허용하지 않지만, 특정 서버의 요청을 허용하기 위해 사용되는 모듈
• 이 예제에서는 back 서버에서 front 서버의 요청을 허용하기 위해 사용됨.

전체 코드

app.vue (front)

<template>
  <div id="app">
    <v-form ref="form" @submit.prevent="send">
      <v-text-field v-model="number" label="숫자를 입력하세요." :style="{width: '200px'}"/>
      <v-btn type="submit">전송</v-btn>
    </v-form>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data(){
    return {
      number: "",
    };
  },
  methods: {
    send(){                             // 전송 버튼 클릭 시
      axios({                           // axios 통신 시작
        url: "http://127.0.0.1:52273/", // back 서버 주소
        method: "POST",                        // 전송방식을 post로 지정
        data: {                                  // body라고 생각하면 됨
          number: this.number,              // key가 number이고 value가 입력받은 숫자(this.number)
        },
      }).
      then(res => {                              // back 서버로부터 응답받으면
        alert(res.data.message);            // back 서버에서 보낸 message 출력
      })
    }
  }
}
</script>

main.js (back)

var express = require('express');
var app = express();
var cors = require('cors');

app.use(cors({              // front 서버인 127.0.0.1:8080 의 요청을 허용하도록 cors 사용
    origin: 'http://127.0.0.1:8080',
    credentials:true,
}));

app.use(express.json());    // json 형태의 Request Body를 받기 위해 사용
app.use(express.urlencoded({ extended: true }));

app.post('/', function(req, res){   // front 서버에서 post 방식으로 전송받음
    console.log('입력받은 숫자는 : ' + req.body.number);                          // Request Body의 number값 출력
    return res.status(200).json({                                  // front 서버에 json 형태로 '잘 받음' message 리턴
        message: '잘 받음',
    });
});

app.listen(52273, function() {
    console.log('Server Running at http://127.0.0.1:52273');
});

• 다음과 같이 코드 작성 후 npm run serve와 node main.js를 통해 front, back 서버를 실행
• 이 때, 주의할 점은 http://localhost:8080이 아닌 http://127.0.0.1:8080에 접속해야 한다는 것

결과

1. front 서버에서 숫자 입력 후 전송 버튼 클릭

2. front 서버에서 입력받은 숫자를 back 서버에서 제대로 출력함을 확인

3. back 서버에서 보낸 메세지를 front 서버에서 제대로 출력함을 확인