[Vue.js] Proxy를 통해 CORS 에러 해결하기

CORS(Cross Origin Resource Sharing)란 웹 페이지 상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조로 CORS 정책이 없다면 사용 중인 서비스나 프로젝트에 외부의 모든 접근이 가능하게 되고 보안성이 현저히 낮아지기 때문에 꼭 필요한 정책이라고 할 수 있다.

하지만 우리는 이 CORS 정책으로 인해 다음과 같은 에러를 보게 된다.

웹에서 테스트를 하다보면 발생하는 CORS 에러. 위에서 설명한대로 최초 자원이 서비스된 도메인이 아닌 다른 도메인으로 요청을 해서 발생한다.

API 요청시 브라우저의 현재 주소와 API 주소의 도메인이 일치 하지 않는 경우 발생한다. 이 에러를 Proxy를 통해 해결해보자.

1. Proxy 란?

클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주는 컴퓨터 시스템이나 응용 프로그램을 말한다.

웹팩 개발 서버의 Proxy 옵션을 통해 브라우저에서 API 요청시 API 서버에 직접 요청하는 것이 아닌 devServer 주소로 요청을 하고, API 서버로부터의 응답 역시 Proxy 서버로 받아들여 브라우저에 반환함으로써 CORS 에러를 해결할 수 있다.

2. Proxy 설정하기

영화 검색 API 호출 URL은 “https://openapi.naver.com/v1/search/movie.json?query=’검색어’” 이다. 하지만 axios를 통해 URL을 호출해보면 CORS에러가 발생하는데 로컬 환경에서 테스트를 하고 있는 우리는 “localhost:8080/v1/search/movie.json?query=’검색어’“로 API 호출이 되고 있기 때문이다.

여기서 localhost:8080을 원래 URL과 같이 https://openapi.naver.com으로 변경해주는 작업을 Proxy 설정을 통해서 할 수 있다.

프로젝트 폴더 에서 vue.config 파일에 아래와 같이 devServer 세팅을 해주면 되는데, 네이버에서 제공하는 open API 중 영화검색 API를 예로 들어보자.

혹시 vue.config 파일이 없다면 pakage.json 파일과 동일한 위치에 생성하면 된다.

module.exports = defineConfig({
    // 개발 서버 설정
    devServer: {
        // 프록시 설정
        proxy: {
            // 프록시 요청을 보낼 api의 시작 부분
            "/v1": {
                // 프록시 요청을 보낼 서버의 주소
                target: "https://openapi.naver.com",
            },
        },
    },
});

vue.config 파일의 defineConfig 영역에서 devServer를 추가하고 Proxy를 설정한뒤 요청을 보낼 api 시작 부분을 입력한다. 그리고 target에 Proxy 요청을 보낼 서버의 주소를 입력해주면 되는데 이 주소가 localhost:8080의 주소 대신 실제로 서버에 요청하게 될 주소가 된다.

3. 호출하기

위와 같이 Proxy를 설정하고 나면 API를 호출하는 URL중 target에 선언한 부분을 제외한 나머지 URL을 입력해서 호출하면 된다.

axios.get("/v1/search/movie.json?query='검색어'")
    .then((result) => {
        console.log(result.data);
    })
    .catch((error) => {
        console.log(error);
    });

혹시나 포스트맨에서는 호출이 되는데 웹에서 직접 호출할 때 안되는게 이상하다고 하는데, 포스트맨은 웹 도메인이 아니라서 그런것!! 서버에서 호출할 도메인을 허용해야 에러가 나지 않는다.