Proxy 서버를 사용하여 CORS 이슈 해결하기

프론트엔드(클라이언트)에 localhost:3000 포트로 접속하고 벡엔드(서버)로 locahost:5000 포트로 접속하여 클라인언트에서 서버에 데이터를 가져올 경우 CORS 이슈가 발생한다.

CORS란 Cross-origin-resource-sharing의 줄임말로 서로 다른 포트나 도메인을 가진 서버는 아무 설정 없이 Request를 보낼 수 없는 보안 이슈이다.

이 이슈를 해결하기 위해서 프록시(proxy)라는 것을 사용하여 문제를 해결해야 한다.

프록시 서버(proxy server)

클라이언트가 프록시서버를 통해 다른 네트워크 서비스에 간접적으로 접속할 수 있도록 해주는 컴퓨터 시스템이나 응용프로그램이다.

 

서버와 클라이언트 사이에 중계 시스템으로써 대신 통신을 수행해주는 것을 프록시라 하며 그 기능을 프록시 서버라고 한다.

 

아래와 같이 http-proxy-middleware라는 것을 사용하여 CORS 이슈를 해결해보자

npm install http-proxy-middleware --save

 

만약 localhost:3000 포트에서 5000 포트로 접근한다고 했을 경우 CORS 이슈가 발생하여 error가 발생한다.

 

src 폴더 안에 setupProxy.js 파일을 생성해 주어서 다음과 같은 코드를 작성하면  localhost:5000 포트에 접근이 가능해진다.

 

http-proxy-middleware를 설치하여 설정하여 준 뒤 axios를 3000번 포트(클라이언트) 통해 localhost:5000에서 데이터를 가져오면 에러없이 데이터에 접근이 가능하다.

import React, { useEffect } from 'react'
import axios from 'axios'

function LandingPage() {
    useEffect(() => {
        axios.get('/api/hello')
        .then(response=> { console.log(response)})
     }, [])
    return (
        <div>
            LandingPages
        </div>
    )
};
export default LandingPage

 

아래와 같이 data를 받아올 수 있게 된다.