-
[Vue3+mongoDB+express ch.3] Frontend Backend 연결Vue 2020. 12. 31. 15:38
이제 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창을 보면 데이터를 잘 가져온것을 볼 수 있다.
'Vue' 카테고리의 다른 글
express async request handler 오류 (0) 2021.01.26 [Vue]record 문법 사용법 (0) 2021.01.06 [Vue3+mongoDB+express ch.4] 라우터 설정 (router) (0) 2020.12.31 vue3 express mongoDB 개발환경 세팅 (0) 2020.12.29 typescript를 사용한 Vue3 프로젝트 환경 만들기 (0) 2020.12.24