react proxy 리액트 프록시 cors 문제 해결

John Ahn 님의 강의를 보면서 알게 된 내용을 작성.

노드 리액트 기초 강의 #23 Proxy Server ?

 

리액트에서 cors 문제를 해결할 수 있는 방법 중 하나로 프록시를 설정을 하는 것이다. (Express 서버에서 설정도 가능하다.)

자세한 내용은 잘 모르겠지만, 다음과 같이 설정을 해주면 해결할 수 있다.

Create React App · Set up a modern web app by running one command.

Create React App · Set up a modern web app by running one command.

 

 

src/setupProxy.js

/*
 * https://create-react-app.dev/docs/proxying-api-requests-in-development
 *
 * 프록시 설정을 해주면 CORS 에러 문제를 해결할 수 있다.
 *
 * Note: You do not need to import this file anywhere.
 * It is automatically registered when you start the development server.
 * 다른 곳에 임포트해서 사용할 필요 없이 자동으로 적용된다.
 *
 * 만약  /api/hello 이런식으로 사용하면 자동으로 localhost:5000 으로 설정된다
 */

// -------------------------------------------------------------

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

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

 

 

src/component/LendingPage.js

...
axios.get('/api/hello')  // http://localhost:5000 안 써줘도 괜찮다.
  .then(res=> console.log(res.data))
  .catch()
...