[TIL] Vue에서의 백엔드 통신

🙋🏻‍♂️ 오늘 받은 질문

"Vue에서 axios를 통해 백엔드로 통신하는데 사용하는 proxy를 이해 못 하겠어요. 왜 이렇게 사용하는 건가요.?"

 

질문을 받고 난감했다...

프로젝트를 진행할 때 항상 그렇게 사용해 왔기에 전혀 의구심을 품지 못 했었다.

그렇기 때문에 대답을 못 해드렸다.

같이 모니터를 보면서 어떤 식으로 동작하는 건지 이곳저곳을 고쳐보면서 흐름을 찾아나갔다.

그치만 어떤 식으로 흘러가는지만 확인할 뿐 정확히 왜 그렇게 되는지 알지 못했다.

 

그래서 오늘은 이 부분을 정리해볼까 한다..

 

Vue에서는 최상단(루트) 위치에 vue.config.js를 생성하여 아래와 같이 작성하면 proxy 패턴을 사용할 수 있다.

module.exports = {
	devServer: {
    	proxy: {
        	'/api': {
            	target: 'http://localhost:3000',
                changeOrigin: true
            }
        }
    }
}

이렇게 선언을 하게되면 로컬 데브 서버에서 API 요청 시 변화가 생기게 된다.

 

만약 proxy를 주지 않고 API를 요청할 경우 CORS(Cross-Origin Resource Sharing) 이 발생하게 된다.

 

💡CORS (Cross-Origin Resource Sharing) 란

다른 도메인 간에 자바스크립트로 자원을 요청할 수 없다는 의미

 

브라우저에서 보안적인 이유로 cross-origin HTTP 요청을 제한한다.

그렇기 때문에 cross-origin 요청을 하려면 서버의 동의가 필요하다.

이러한 절차를 HTTP-header 를 이용해서 가능한데, 이를 CORS(Cross-Origin Resource Sharing)이라고 한다.

 

Cross-Origin은 아래 조건 중 한가지라도 다를 경우를 말한다.

1. 프로토콜 - http와 https는 프로토콜이 다르다.

2. 도메인 - domain.com 과 other-domin.com 은 다르다.

3. 포트 번호 - 8080 포트와 3000 포트는 다르다.

proxy를 통하게 되면 우회해서 Cors 문제 없이 백엔드와 통신할 수 있게 된다.

 

사용된 방법은 이러하다.

vue.config.js에 proxy를 두었고, axios는 instance를 만들어서 따로 관리하여 사용하였다.

(backend에 prefix는 마찬가지로 /api로 맞춰두었다.)

import axios, { AxiosInstance } from 'axios';

const baseURL = '/api'/;
const instance :AxiosInstance = axios.create({
    baseURL,
    headers: {
        'Content-Type': 'application/json'
    },
    timeout: 20000
});

instance.interceptors.request.use(config  => {
    .
    .
    return config;
});

instance.interceptors.response.use(response => {
    .
    .
    return response
});
export const ins = instance

axios의 baseURL을 '/api'로 설정하였다.

 

그렇다면 클라이언트 단에서 아래와 같이 API를 호출하였다. (axios는 위에 생성한 instance를 사용하였다.)

const { data } = await this.axios.get('/api/users');

/api/users 를 보면

 

먼저 axios instance에 있는 baseURL에 /api로 했었다.

그럼 /api에 맞춰서 vue.config.js에 선언해준 /api로 찾아서 가게되는데

최종 경로는 http://localhost:3000/api/users 로 우회해서 API를 호출하게 된다.

 

만약 프론트에 사용중인 포트로 접근하기 위해서는 http://localhost:8080/api/api/users 로 접근하면 위에서 사용했던 방법과 동일한 결과 값을 받을 수 있다.