프로젝트에서는 클라이언트인 Vue 애플리케이션과 서버 애플리케이션을 분리해서 개발하고 각각을 별도의 포트로 운영하게 되는 경우가 많다

이렇게 클라이언트와 서버가 다른 포트를 사용할 때, HTTP 요청을 하게 되면 CORS 문제가 발생한다

이러한 문제를 해결하기 위해 Proxy 서버를 사용하게 된다

10.1 프록시(proxy) 서버

💡 클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주는 응용 프로그램

서버와 클라이언트 사이에 중계기로써 대리로 통신을 수행하는 것을 프록시(proxy), 그 중계 기능을 하는 것을 프록시 서버(proxy server) 라고 한다

10.2 CORS 란

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

10.3 CORS 해결방법

기본적으론 서버에서 접근을 허용해주면 된다

// 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) 서버를 이용한다

💡 클라이언트와 서버 사이에서 HTTP 요청과 응답을 대신 처리해주는 역할

10.4 Proxy 설정하기

루트 디렉토리에 vue.config.js 파일을 생성한다

vue.config.js

const target = "http://127.0.0.1:3000"; // proxy 요청을 보낼 서버 주소

module.exports = {
  devServer: {
    port: 8080,
    proxy: {
      "^/api": {
        target,
        changeOrigin: true,
      },
    },
  },
};

Vue에서 proxy를 설정하고 클라이언트에서 HTTP 요청(port:8080)을 하면 proxy 서버가 웹 서버로 HTTP 요청(port:3000)을 대신 해 CORS 문제를 해결한다

10.5 서버에서 CORS 해결

위 방법으로 개발 환경에서 CORS 해결은 가능하지만, 실제 운영 환경에서는 서버에서 처리를 해줘야 한다

API를 요청받는 서버에서 서버 헤더 중 Access-Control-Allow-Origin 필드에 CORS를 허용해 줄 도메인 주소를 등록해서 해결한다

const cors = require("cors");

let corsOption = {
  origin: 'http://localhost:8080', // 허락하는 요청 주소
  credentials: true // true로 하면 설정 내용을 response 헤더에 추가해준다
}

app.use(cors(corsOption)); // CORS 미들웨어 추가

그리고 Vue 에서는 axios를 import한 소스 파일에서 다음과 같은 코드를 추가한다

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'] = '*';

이렇게 설정하면 vue.config.js 의 proxy 설정 없이 개발환경이나 운영환경에서 CORS 문제를 해결할 수 있다

---

출처: 고승원 저, 『Vue.js 프로젝트 투입 일주일 전』, 비제이퍼블릭(2021)

---