[React] React Proxy 설정 및 http-proxy-middleware 404 오류

 

프론트단에서 CORS 관련 오류를 방지하기 위해서 proxy 설정을 진행하여 백엔드서버에서 데이터를 가지고 옵니다.

 

CORS(Cross Origin Resource Sharing)
서버와 클라이언트가 동일한 IP주소에서 동작하고 있다면, resource를 제약 없이 서로 공유할 수 있지만,
만약 다른 도메인에 있다면 원칙적으로 어떤 데이터도 주고 받을 수 없도록 하는 매커니즘입니다.

 

 

1. 간단 Proxy 설정

 

React package.json 파일 중간에 아래와 같이 proxy 서버를 기입해 간단하게 설정 할 수 있습니다.

  "proxy": "http://localhost:8080/",  // PORT 번호까지만 기입 가능

 

하지만 인터넷 환경에 따라 안되는 경우도 존재하고, 원하는 url 주소를 사용할 수 없고 port번호까지만 기입이 가능하다는 단점이 존재합니다.

 

npm run start;

서버를 재시작해줘야 proxy 설정이 적용되면 아래와 같이 정상적으로 호출되었음을 확인 할 수 있습니다.

 

 

2. http-proxy-middleware 사용

 

위의 1번의 단점을 보완하여 확실하게 사용자가 정의해줄 수 있는 방법입니다. 

 

http-proxy-middleware를 사용하기 위해 라이브러리를 설치해줍니다.

npm install http-proxy-middleware --save

 

라이브러리 설치 후 src폴더 안에 setupProxy.js 라는 proxy 설정 파일을 신규로 생성해줍니다.

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:8080',	
      changeOrigin: true,
    })
  );
};

 

npm 재시작 후 backend 데이터를 가지고 오는지 확인해봤는데 아래와 같이 proxy 설정이 잘 되지 않았습니다 TT

Request failed with status code 404

 

분명 proxy를 이용해서 8080으로 설정했음에도 불구하고  8080 서버 호출이 안되는 문제점이 존재했습니다.

원인 분석

모든 문서랑 블로그를 뒤져보고,,,, 백엔드 포트랑 다확인 해봤는데 왜 middleware만 사용하면 적용이 안되는지 찾지 못했습니다ㅠㅠㅠㅠㅠ

 

원인을 아시는 분 있으면 공유부탁드리겠습니다.

function App() {
   const [hello, setHello] = useState('')

    useEffect(() => {
        axios.get('/api/test')
        .then(response => setHello(response.data))
        .catch(error => console.log(error))
    }, []);

    return (
        <div>
            {hello}
        </div>
    );
}