PWA + Vue-CLI 3 학습하기 #3 - Axios, Cors, Proxy

이전글 : PWA + Vue-CLI 3 학습하기 #2 - vuetify 

Axios

Promise (비동기 로직 처리에 유용한 자바스크립트 객체) 기반의 API 통신(HTTP) 라이브러리.

뷰에서 권고하는 HTTP 통신 라이브러리는 액시오스(Axios)입니다. 

Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양합니다.

npm - axios

Cors

CORS란  Cross Origin Resource Sharing의 약자로, 현재 Application의 도메인(웹페이지)에서 다른 웹페이지 도메인으로 리소스가 요청되는 경우를 얘기합니다. 예를 들면, 웹페이지인 http://web.com 에서 API서버 URL인 http://api.com이란 도메인으로 API를 요청하면 http 형태로 요청이 되므로 브라우저 자체에서 보안 상 이유로 CORS를 제한하게 되는 현상을 말합니다.

405 Method Not Allowed

 

SPA(Single Page Application) 기반 앱을 RESTful API연동 방식으로 개발을 하다보면 API 서버와 웹페이지서버가 각각 따로 운영이 되므로 CORS 문제에 항상 부딪히는 경우가 다반사입니다.

이 문제를 해결하기 위해서는 API 요청을 받는 쪽. 즉, API서버의 응답 헤더를 변경해주는 것으로 해결 해 줄 수 있습니다. 서버 헤더 중 Access-Control-Allow-Origin이라는 헤더 프로퍼티가 있는데, 이 헤더는 CORS를 허용해 주는 도메인을 설정해 주는 역할을 합니다.
이렇게 node.js Express기반의 API 서버에서 Access-Control-Allow-Origin 헤더를 설정해줄 수 있는 cors npm 모듈이 있습니다. 

npm - cors

Proxy

proxy 는 '대리' 라는 의미로 서로 다른 공간에 있는 두 서버의 중계 기능을 담당합니다.
우리가 프론트엔드를 개발할 때, 일반적으로 http://localhost:8080 같은 로컬 주소를 사용하게 됩니다.
이 때 port 번호는 8080 이 되겠죠.

그리고 백엔드 또한 port 를 사용하게 되는데, 기본은 80 이나 개발용으로는 8080 을 사용하지 못합니다. 
4000 이나 8001 같은 다른 포트를 사용하죠. 
이유는 1가지의 port 번호를 2개나 열 수 없기 때문이죠. 그래서 proxy 로 프론트엔드 서버와 백엔드 서버를 연결해 주게 됩니다.
프론트엔드 개발이 끝나고 배포할 경우에는 proxy 가 필요하지 않겠죠. path 가 같아지게 될테니까요.

 

vue-clli가 3으로 버전업이 되면서 프록시 설정부분이 살짝 달라졌습니다. 
우선 설정파일이 없어서 생성해야 합니다. 
root 폴더에 vue.config.js 라는 파일을 만들고

'use strict'

module.exports = {
  devServer: {
    proxy: { // proxyTable 설정
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}

PM2 npm script

pm2 start npm --name "{app_name}" -- run {script_name}

 

도움이 되었던 사이트

from [Vue.JS] 리스트 렌더링

from List Rendering and Vue’s v-for Directive

from Vuetify

from Vue.js PWA 프론트앤드 개발 3

from Vue Proxy 연결하기

 

관련 개인 실습 소스 저장소

from https://gitlab.com/betaworld