CORS error

안녕하세요 새벽에 잠결에 답변을 달았다가 삭제하고, 아침에 다시 답변하고 있습니다.

일단 이 강좌가 서버를 다루지 않은 클라이언트 강좌이다 보니, 서버를 배제하고 할 수 있는 방법을 보여주게 되어서 vue.config.js에 devServer에 proxy를 설정하였습니다.

질문자님께서 말씀하신 것 처럼, 이렇게 설정할 경우 개발환경에서는 정상 수행이 되지만, 운영환경에서는 실행이 되지 않게 됩니다.

그래서 CORS를 정확히 해결하려면 결국 서버에서 처리를 해줘야 합니다. 이 강좌가 Vue 강좌이지만 잠깐 서버쪽 설정을 말씀드리도록 하겠습니다.

API를 요청받는 쪽인 서버에서 서버 헤더 중 Access-Control-Allow-Origin이라는 헤버 프로퍼티에 CORS를 허용해 줄, 즉 클라이언트 도메인 주소를 등록하여 해결 할 수 있습니다.

Node.js를 예로 설명 드리도록 하겠습니다.

Node.js의 경우 cors라는 모듈을 활용하여 쉽게 해결을 할 수 있습니다.

Node의 app.js에 아래와 같이 cors 설정을 할 수 있습니다.

const cors = require('cors');

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

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

그리고 Vue에서는 다음과 같이 처리를 해줘야 합니다.

vue.config.js에 devServer에 설정된 proxy를 제거합니다.

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문제를 운영에서 피하기 위해서는 Vue와 같은 클라이언트에서 API를 호출하는 것이 아니라 서버에서 호추를 해야 합니다. 네이버 아이디로 로그인 API는 서버에서 호출하도록 Node.js와 같은 서버 프로그램용 API를 제공하고 있습니다.

부득이하게 클라이언트로 운영에서 처리를 해야 한다면, window.location.href로 토큰 삭제 URL를 실행하면, CORS 문제 없이 토큰이 삭제가 됩니다. 하지만 이 역시도 좋은 방법이 아니기 때문에 운영에서는 서버 환경에서 처리 하는 것을 추천 드립니다.

본 강좌가 node.js 같은 서버를 다루지 않다 보니, 강좌 내에서 클라이언트에서 처리 하도록 proxy를 이용한 점 양해 부탁드립니다.

그리고 이렇게 좋은 질문을 해주셔서 진심으로 감사드립니다.

인프런 커뮤니티 질문&답변