React를 경험해보자. 3탄

 

✏️React를 경험해보자 3탄

 

2편에서 Axios를 통해 get을 호출했는데 Cors에러가 발생해서 API호출에 성공하지 못했다.

3편에서는 이처럼 Cors 에러를 해결할 수 있는 Proxy 설정을 하려고 한다. 

 

 

- Cors?? 

 

우선 Cors에러가 발생하는 이유는, 다음과 같다.

Front서버는 localhost:3000 포트를 사용 중이고, Backend는 localhost:5000 포트를 사용중이다.

이처럼 다른 포트를 사용중일 때, 보안 상의 이유로 Cross Origin Resource Sharing 에러가 발생한다. 

 

이 문제를 해결할 수 있는 방법은 여러가지가 있지만, 나는 Proxy를 통해 해결하려고 한다.

 

 

- Proxy ?? 

 

네이버에 Proxy 단어를 검색했을 때 나오는 뜻은 "대리, 대리인" 등의 뜻이 나온다.

대리인의 역할, 즉 중간 역할을 해준다고 생각하면 될 것 같다.

 

그렇다면 중간 역할이 왜 필요할까? 

 

사용자가 요청을 할 때 IP가 전달이 되는데, Proxy가 유저의 IP를 받아 임의로 바꿔버릴 수 있다.

그래서 인터넷에 접근하는 사람의 IP를 모르게 해준다.

 

Proxy 사용 이유를 검색해보았을 때 이러한 이유가 대표적이다.

 

1. 특정인 (회사 직원, 혹은 아이들) 인터넷 사용 제어

2. 캐싱을 이용한 더 빠른 인터넷 이용 제공

3. 보안 제공

4. 이용 제한된 사이트 접근 가능 

 

 

- Proxy 설정을 통해 Cors 이슈를 해결해보자.

 

npm install http-proxy-middleware --save

 

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

Proxying API Requests in Development | Create React App

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

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

 

http-proxy-middleware 설치 후 src 폴더 안에 setupProxy.js 파일을 생성하고,

위 코드를 붙여넣어준다. target에 서버 포트를 입력해주면 된다. 

 

그리고 Backend 서버와 Front 서버를 켜서 Cors이슈가 뜨는지 확인해보면?! 

 

 

Cors 에러 없이 정상적으로 get API가 작동하여 데이터를 가져오는 것을 확인해볼 수 있다.