🧩 Vue 2로 배우는 프론트엔드 기초

🎯 학습 목표

• 프론트(Vue)와 백엔드(Express)를 완전히 분리하여 개발
• CORS 문제 해결과 프록시 설정 적용
• 배포 시 API 경로 정리

✅ 1. 현재 구조 요약

• 프론트엔드(Vue CLI 앱): localhost:8080
• 백엔드 서버(Express): localhost:3000

→ 서로 다른 포트로 인해 CORS 정책 위반 발생 가능

✅ 2. 백엔드에서 CORS 허용

터미널에서 Express 서버 디렉토리로 이동한 뒤 다음을 실행하세요:

npm install cors

📁 예: vue2-api/ 안에서 실행

✅ 서버 코드 (server.js)

const express = require('express')
const cors = require('cors')
const app = express()

app.use(cors()) // 모든 출처 허용
app.use(express.json())

// 나머지 라우터 설정 ...

보안 강화를 위해 배포 시에는 다음과 같이 제한된 출처만 허용할 수 있습니다:

app.use(cors({ origin: 'https://my-frontend-domain.com' }))

✅ 3. 프론트엔드 프록시 설정 (Vue CLI 전용)

📄 vue.config.js 수정

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

✅ Axios 요청 경로 변경

프론트에서 기존:

const API_URL = 'http://localhost:3000/todos'

변경 후:

const API_URL = '/api/todos' // 프록시를 통해 서버로 전달됨

이 설정을 통해 Vue 앱은 CORS 없이 /api/todos로 백엔드와 통신할 수 있습니다.

✅ 4. 프로젝트 실행

# 터미널 1
node server.js

# 터미널 2 (vue 프로젝트 폴더)
npm run serve

프론트 요청: localhost:8080/api/todos

백엔드 응답: localhost:3000/todos ← 프록시가 중간에서 연결

✅ 5. 배포 시 구조

// 배포 시 Axios baseURL 예시
const API_URL = 'https://my-api-server.com/todos'

🧠 정리

FE 저장소

GitHub - heroyooi/vue2-app at ch9

BE 저장소

GitHub - heroyooi/vue2-api at ch8