Front-End | CORS (Cross Origin Resource Sharing), proxy

포스트 계기

현재 프론트엔드 + 백엔드로 구성된 팀 프로젝트를 진행하고 있는 중이다.
프론트엔드측에서는 JavaScript 프레임워크인 Vue 를 이용하여 개발을 진행 중이고
백엔드 측은 Java 언어인 Spring을 통하여 개발을 진행하는 중이다.

 

이 두 가지의 프레임워크를 서로 연동을 시켜주는 작업을 진행하던 도중에 결국 실제 배포 환경에서는 Vue로 

작성한 코드들이 build 되어 정적인 파일로 바뀌게 되고, 요청을 받는 서버는 Spring 서버 하나가 되어야 하는

것을 알게 되었다.

 

그렇지만 현재 단계에서는 분명 Vue의 port번호와 Spring의 port번호는 다른 상태이고

그로 인해 CORS에 관해 학습을 진행하게 되었다.

그 과정에서 proxy, axios, fetch, build 등에 대해서 추가적인 학습을 진행할 예정이며

오늘은 CORS와 proxy에 대해서만 간단하게 포스트 할 예정이다.

---

CORS 란

기존에는 다른 주소, 포트의 경우 서로 요청을 주고받을 수 없게 웹 보안이 적용되었었다.
예전에는 그 방식이 악의적인 목적을 가진 접근이라고 생각했기 때문이다

그러나 기술이 발전하고 서비스가 늘어남에 있어 도메인의 주소가 다른 서버끼리 요청을 주고받아야 하는

상황들이 발생하게 되었다.

 

그렇게 하여 생겨난 방법이 JSONP이었으며 JSONP는 script 태그를 통해서 외부 데이터를 받아오는 방식이었다.
그러나 JSONP는 따지고 보면 정상적인 경로가 아닌 우회 경로를 통해서 데이터를 받아오는 것이었기 때문에

보안적인 문제 등 여러 문제들로 인해 지금은 거의 사용하지 않는 방법이 되었다.

 

그로 인해 웹브라우저 측에서는 공식적인 루트를 통해서 서로 요청을 주고받으라는 취지에서 CORS라는
체제가 생겨났고 CORS(교차 출처 리소스 공유) 정책을 통해 HTTP 헤더를 사용하여 서로 다른 도메인을 가진

서버끼리 선택적으로 요청을 주고받을 수 있는 권한을 줄 수 있게 되었다.

---

CORS 적용하기

기본 해결방안

• 동일한 출처를 사용하면 문제가 발생하지 않는다.

서버 측 해결방안(response)

• 서버 쪽 HTTP 응답 헤더를 변경해 주는 방법 (express를 사용할 경우 cors를 통해 쉽게 해결 가능하다.)

클라이언트 해결방안(request)

• proxy :대리, 대신이라는 의미로 다른 주소를 가진 브라우저와 서버의 중간에서 추가적인 작업을 통해 요청을 주고받게 해주는 중간 서버를 이용하는 방식

// vue.congit.js file 생성해준다.
// api값의 url의 요청에 대해서는 localhost:9000으로 전달하겠다.
module.exports = {
  devServer: {
    proxy: {
      'api': {
        target: 'http://localhost:9000',
        ws: true,
        changeOrigin: true
      },
    }
  }
}

 

직접적으로 build와 axios , fetch에 대한 부분은 추후에 다시 포스트를 할 예정이다.