[Vue3+mongoDB+express ch.3] Frontend Backend 연결

이제 frontend에서 요청을 보내면 backend 서버에서 mongoDB에 저장된 정보를 꺼내서 frontend에 보여주는 작업을 해볼것이다. 

 

현재 frontend는 localhost:8080, backend는 localhost:3001에서 돌고있다. 

즉 8080에서 요청을 보내면 3001에 가서 작업을 해주고 8080에 응답을 보내줄것이다.

 

backend 프로젝트의 app.ts에 코드를 추가한다. localhost:3001/users라는 path에 접근하면 users를 응답으로 보내준다는 뜻 이다. 

//app.ts

app.get('/users', (req, res) => {
  User.find().then(users => {
    console.log(users)
    res.send({ users })
  })
})

 

frontend프로젝트의 main.ts에 다음 코드를 작성한다. server로 요청을 할 수 있도록 해주는 fetch를 사용한다. 

frontend에서 localhost:3001/users로 요청을 보내 users array에 0번째 user의 id를 띄워준다. 

//main.ts

import { createApp } from 'vue'
import App from '@/App.vue'

export const serverUrl = `http://${location.hostname}:3001/users`;


fetch(`${serverUrl}`)
  .then(res => res.json())
  .then(res => {
    console.log(`${res.users[0].id} 님 환영합니다`, res);
  });

createApp(App).mount('#app')

이제 서버를 켜두고 frontend인 8080에 접속해보면 다음과 같은 오류를 보게될것이다. 

cors 오류란 보안상 이유로 브라우저들은  cross-origin HTTP 요청을 제한해버린다. 이를 해결하기 위해서 backend의 app.ts에 다음을 추가한다.

// cors setting
import cors from "cors"
app.use(cors());

그냥 추가하면 cors 모듈을 찾을수 없다는 에러가 뜨니 설치를 해주자.

npm install cors
npm i --save-dev @types/cors

이제 다시 localhost:8080에 접속해 console창을 보면 데이터를 잘 가져온것을 볼 수 있다.