[React] Proxy 문제 해결하기 - http-proxy-middleware

https://youtu.be/BHSJw8PDwj0?si=45xjqW7_15UDmeUS

 

본 포스팅은 John Ahn 님의 유튜브 강의를 참고했습니다.

 

client와 server가 요청을 보낼 때 포트가 다르면

 

CORS정책 문제가 발생합니다.

 

CORS는 Cross Origin Resource Sharing의 약자로

 

포트가 다른 상태로 요청을 보내면 보안이 취약해 질 수 있다는 이유로

 

이러한 행동을 막는 것 입니다.

 

따라서 포트가 다를 경우는 CORS문제를 해결해야 합니다.

 

한 가지 방법은 http-proxy-middleware라는 모듈을 사용하는 것입니다.

 

먼저 이것을 터미널에서 설치해줍니다.

 

npm i http-proxy-middleware --save

 

그리고 src폴더로 가서

 

setupProxy라는 js파일을 만들어 줘야 합니다.

 

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

module.exports = function(app) {

  app.use(

    '/api',

    createProxyMiddleware({

      target: 'http://localhost:5000',

      changeOrigin: true,

    })

  );

};

 

target에는 서버 주소를 입력해줍니다.

 

그리고

 

get요청을 보낼 때

 

 axios.get('http:localhost:5000/api/hello')

 

 axios.get('/api/hello')

 

이렇게 앞 주소를 지워주면 됩니다.

app.get('/api/hello', (req, res) => res.send('Hello World '));

 

 

그러면 이렇게 서버에서 보낸 데이터가

 

localhost:5000

 

5000번 포트에서 잘 뜨는 것을 확인할 수 있습니다.

 

 

오늘은 CORS정책 문제 해결하는 방법에 대해 알아봤습니다.

 

감사합니다!