[MAC] Node/React 기초 - Proxy로 CORS 에러 해결

 

해결 방법

1) 개발자 도구 이용 
- 개발자들만 사용 ->제한적

2) JsonP 방식 
- 프론트엔드 부분만 고칠 수 있는 상황일 때
- 모든 request 를 get request로 바꿔서 보냄 

3)
- 백엔드, 프론트엔드 모두 다 제어가능 할 때

4) Proxy 사용

 

 

Proxy 

Proxy란?

 

 

 

Proxy로 CORS 에러를 해결해보자.

 

참고 사이트

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

 

다시 백엔드를 켜고 프론트 엔드 서버를 켜서 확인해보자.

 

CORS 에러는 없어졌으나 오류가 여전하다...

 

 

해결 방법

: http-proxy-middleware를 다른 디렉토리에 설치해서 에러가 발생한거였다. 'boiler-plate/client'에 설치하면 에러가 해결된다!