[React] BE 세팅하기(2) axios/proxy

//리액트 프로젝트 'BE 세팅하기(1) express/mongoose '에서 이어집니다.

axios 설치

cd client
npm i axios --save

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다.

http-proxy-middleware 설치

npm i http-proxy-middleware --save

CORS: '교차 출처 리소스 공유' 라는 뜻을 가지는 해당 정책은 서로 다른 서버에 request를 할 때
보안상의 이유로 교차 출처 HTTP 요청을 제한한다. 이 문제를 proxy를 두어 해결합니다.

src/setupProxy.js 생성

//setupProxy.js

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

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

실행

cd ..
npm run start