[Vue.js 3.x]Proxy 사용하기

2021-10-12

Vue.js

Proxy 사용하기

Proxy의 필요성

일반적으로 FE인 Vue 어플리케이션과 BE를 분리해서 개발하고 각각을 별도 포트로 운영
클라이언트와 서버가 별도의 포트를 사용할때 클라이언트가 서버로 HTTP요청을 하게 되면 CORS 문제가 발생한다
해당 문제를 해결하기 위해 Proxy 서버 사용

Proxy 서버

프록시 서버

클라이언트가 자신을 통해 다른 네트워크 서비스에 간접적으로 접속할 수있게 해주는 응용 프로그램
서버 클라이언트 사이의 중계기로써 대리로 통신을 수행하는 것을 프록시라 한다

CORS

웹 어플리케이션에서 도메인,포트 프로토콜이 다른곳으로 HTTP 요청을 보낼 수 없도록 브라우저가 요청을 막는 보안 정책

CORS 해결법

서버에서 접근 허용

서버 헤더중 Access-Control-Allow-Origin에 CORS를 허용해줄 도메인 주소를 등록해서 해결 가능
예시1)

Node.js express서버 예시

app.all('/*', function(req, res, next){
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    next();
});

프록시 서버 사용

Proxy 설정

vue.config.js의 devServer에 proxy설정

const target = 'http://127.0.0.1:3000';

module.exports={
    devServer: {
        port: 8080,
        proxy: {
            //proxy 요청을 보낼 api 시작 부분
            '^/api': {
                target,
                changeOrigin: true
            }
        }
    }
}

개발환경에서는 정상 수행되나 운영환경에서는 실행되지 않음
CORS를 정확히 해결하려면 결국 서버에서 처리 필요

서버에서 CORS 해결

서버의 해결 방법 → 서버 헤더중 Access-Control-Allow-Origin에 CORS를 허용해줄 도메인 주소를 등록해서 해결 가능

Node.js의 경우 cors 모듈을 이용해 해결

app.js(Node의 웹서버 역할)에 다음 코드 추가

const cors = require('cors');
let corsOption = {
    origin: 'http://localhost:8080',    // 허용 주소
    credentials: true                   // true시 설정 내용을 응답헤더에 추가해 줌
}
app.use(cors(corsOption));              // CORS 미들웨어 추가

vue에서는 axios를 import한 파일(여기선 mixins.js)

import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:3000';
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8';
axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';

이렇게 하면 proxy 설정 없이 개발/운영 에서 CORS 문제 해결

devfrontendVue.js