[ReactJS] CORS이슈 해결을 위한 Proxy 설정

앞선 포스팅에서 프론트서버의 3000번포트에서 백엔드서버인 5000번포트로 요청을 보낼때 CORS policy에 의해서 막혔다라는 에러가 발생했었는데요.

서버는 포트가 5000번이고 클라이언트는 3000번으로 다르기 때문에 설정이 따로 없다면 request를 보낼때 CORS 정책에 의해 막혀버리게 됩니다.

CORS정책이 왜 있냐하면 다른 웹사이트에서 우리 서버로 뭔가를 보낸다면 보안적으로 문제가 발생하겠죠?

그런 보안적인 문제 때문에 CORS가 있는 것입니다.

CORS는 Cross-Origin Resource Sharing의 약자입니다.

Cross는 왔다갔다 하는것을 의미하고 Origin은 각 서버에서의 3000번 5000번을 의미하는데 Origin이 다른것입니다.

말그대로 Origin이 Resource Sharing할때 적용되는것이 CORS 정책입니다.

이를 해결하기 위한 방법은 여러가지가 있지만 이번에는 proxy를 사용하는 방법으로 해결해 보겠습니다.

 

https://create-react-app.dev/docs/proxying-api-requests-in-development/

Proxying API Requests in Development | Create React App

이에 대한 설명은 사이트에 나와있습니다.

 

프록시를 이용한 방법인데요.

먼저 http-proxy-middleware를 설치하라고 하네요!

 

npm install 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,
    })
  );
};

 

프록시 설정을 했기 때문에 랜딩페이지에서 axios부분에 http://localhost:5000은 지워줍니다!

 

그러고 다시 실행시키면 CORS에러가 사라집니다!

 

그러면 프록시가 무엇일까요??

클라이언트와 서버사이에서 요청을하고 응답을 하는데 그 사이에 프록시 서버라는 것이 들어갈수 있습니다.

만약 유저가 있고 인터넷이 있다면 유저가 무언가를 보냈을때 프록시 서버에서 해주는 일이 여러가지가 있습니다.

만약 유저의 IP가 111.111.111.111이라고 가정해봅니다.

하지만 받을때는 프록시 서버에서 임의로 변경을 하여 인터넷에서는 실제로 어떤 IP에서 오는지 모를수있습니다.

IP뿐만 아니라 다른 데이터도 마찬가지입니다.

프록시는 이밖에 방화벽 기능도 하며 웹 필터 기능도 하고있습니다.

캐쉬 데이터나 공유데이터를 제공하는 기능도 하고 있습니다.

프록시 서버를 사용하는 이유는 대표적으로 회사에서 직원들이 들어가는 사이트를 제한아거나 가정에서 아이들의 인터넷 사용을 제어할때 사용할수 있습니다.

또 캐쉬를 이용해 더 빠른 인터넷을 제공하며 보다 더 나은 보안을 제공합니다.

이밖에도 이용 제한된 사이트에 접근도 가능합니다.