CORS 에러

백엔드와 협업 프로젝트 중 api를 연동하는 부분에서 cors 에러를 맞닥뜨렸다.

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)

추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.

클라이언트는 서버와 같은 도메인을 사용하거나 서버에서 설정한 도메인으로 요청을 하지 않으면 서버에서 요청을 거절하기 때문에 데이터를 받을 수 없다. 서버에서 응답을 승인할 도메인을 지정하고 클라이언트 쪽에서 승인받을 수 있는 URL로 요청을 보내야 데이터를 성공적으로 받을 수 있다.

proxy 설정

프론트단의 localhost:8080 로컬 도메인을 서버에 설정된 도메인으로 변경해서 요청하는 방법이다.

root 레벨에 vue.config.js 파일을 만들어서 아래와 같이 추가한다.

module.exports = {
    devServer: {
      proxy: '도메인'
    }
  }
}

하지만 이것은 로컬 개발 환경에서만 적용 가능한 임시방편이기 때문에 결국 서버단에서 해결해야 한다.