3. 프록시(Proxy) 설정으로 CORS 이슈 해결

CORS (Cross-Origin Resource Sharing)

 

클라이언트와 서버가 포트가 다른 상태에서 클라이언트 측에서 서버 측으로 무언가 요청했을 때,

브라우저가 보안상의 이유로 요청을 차단하는 문제이다.

​

가령, 클라이언트의 포트가 3000이고, 서버의 포트가 4000으로 열려있으면 보안상의 이유로 차단된다.

이 문제를 해결할 수 있는 방법 중의 하나가 '프록시 (Proxy)' 이다.

 

프록시(Proxy)란?

프록시(Proxy) 라는 것은 사전적 의미로 해석하면 '대리, 대리인'이라는 의미를 갖고 있다.

프로토콜에 있어서는 '대리응답'이라는 개념으로 이해하면 될 것 같다.

 

출처 : https://cbw1030.tistory.com/267

111.111.111.111 이라는 IP 를 가진 유저가 인터넷에 어떠한 요청을 하게 되는 경우에 IP 가 전달되는데,

인터넷에서 유저의 IP를 받을 때에는 프록시 서버가 임의로 유저의 IP를 변경할 수 있다.

​

즉, 인터넷 쪽에서 유저의 실제 IP를 알 수 없도록 하는 것이 프록시 서버의 역할이다.

뿐만 아니라 클라이언트에서 데이터를 보낼 때 프록시 서버에서 데이터를 바꿔서 서버로 전달할수도 있다.

​

# 그렇다면 프록시를 왜 사용할까?

1. 사내에서 혹은 가정에서 특정 사이트에 들어갈 수 없도록 방지할 수 있다.

2. 캐시를 이용하여 더 빠른 인터넷 이용 환경을 제공한다.

> 프록시 서버는 서버 쪽의 정적 이미지 등을 저장시켜놓을 수 있기 때문에 굳이 서버까지 가지 않아도

프록시 서버를 통해 더욱 빠르게 정적 이미지에 접근할 수가 있다.

3. 더 나은 보안을 제공한다.

> IP 를 바꿔서 보내주기 때문에 보안상 더 안전하다.

 

webpack 개발서버 프록시 적용

 

API 요청할 때 아래와 같이 나는 현재 주소에서 호스트를 따로 입력하지 않고 바로 경로를 입력했기 때문에

API 를 호출하게 되면 현재 호스트로 요청을 하게 된다. (즉, front 프로젝트인 3000 포트)

개발서버 (front)는 3000 포트로 열려있는데 API 서버 포트는 4000 으로 설정해주었기 때문에 작동하지 않을 것이다.

...
export const checkEmailExists = (email) => axios.get('/api/auth/exists/email/' + email);
export const checkUsernameExists = (username) => axios.get('/api/auth/exists/username/' + username);
...

이럴 때 개발서버에서 원활하게 작동하게 하기 위해서는 webpack 프록시를 적용해주어야 하는데, create-react-app 으로 생성한 프로젝트에서는 package.json 파일에 특정 속성을 통해 바로 프록시를 적용할 수가 있다.

// package.json
  (...)
  "proxy": "http://localhost:4000"
}

# 위 설정에서 프록시의 동작과정?

(기존)

'브라우저 <> react 서버' 와 '브라우저 <> API 백엔드 서버' 으로 각각 통신을 주고 받음

​

(프록시 적용)

브라우저 > react 서버 통신

→ react 서버 > API 백엔드 서버 요청

→ API 백엔드 서버 > react 서버 응답

→ react 서버 > 브라우저 응답

​

즉, API 백엔드 서버가 할 일을 react 서버가 대신 해주고 있기 때문에 프록시로서의 동작을 하는 것이다.