CORS(Cross-Origin Resource Sharing)

• 프론트에서 백에 데이터 요청 시 프론트와 백의 origin(url)이 달라 발생하는 충돌

해결 방법

back/api-sever.js

const express = require('express')
const app = express()
// 현재 back의 port는 3000
const port = 3000

// 'http://localhost:3000/api/account'에 데이터 저장
app.get('/api/account', (req, res) => {
  res.send({
    mid: 3,
    memberName: '홍길동'
  })
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

• port=3000 이므로 url은 http://localhost:3000 이다.
• mid와 memberName을 담은 데이터는 http://localhost:3000/api/account 에서 가져올 수 있다.

front/App.vue

<script>
import {reactive} from 'vue'
import axios from 'axios'

export default {
  setup() {
    const state = reactive({
      account: {
        mid: null,
        memberName: ''
      }
    })

	// http://localhost:3000/api/account로 하면 오류 발생
    axios.get('/api/account').then(res => {
      state.account = res.data
    })

    return {state}
  }
}
</script>

• 기존에 vue.config.js 없이 'http://localhost:3000/api/account'로 하면 CORS 에러 발생
• vue.config.js 설정 후 '/api/account'로 두면 'http://localhost:3000'은 자동으로 타게팅 됨

front/vue.config.js

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:3000"
      }
    }
  }
}

• '/api'로 시작하는 url이면 앞에 'http://localhost:3000'을 자동으로 타게팅하도록 설정