[React] Axios 및 Proxy 설정

Axios란?

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

백엔드 및 프론트엔드에서 통신을 쉽게하기 위해 Ajax와 함께 사용된다.

 

사용법 및 예제는 아래 공식문서를 참고하면 된다.

https://axios-http.com/docs/intro

Getting Started | Axios Docs

 

npm install axios --save

먼저 axios 패키지를 설치해준다.

 

// client/src/components/views/LandingPage/LandingPage.js

import React, { useEffect } from 'react'
import axios from 'axios';

function LandingPage() {

    useEffect(() => {
        axios.get('/api/hello')
            .then(response => console.log(response.data))
    }, [])

    return (
        <div>
            LandingPage
        </div>
    )
}
export default LandingPage

다음과 같이 axios 객체를 이용하여 간단하게 HTTP 요청을 보낼 수 있다.

 

// server/index.js

app.get('/api/hello', (req, res) => {
  res.send("안녕하세요~");
})

서버측에서도 요청을 받기위해 다음과 같이 추가해주었다.

 

 

사용자의 서버 포트는 5000번이고 클라이언트 포트는 3000번이기 때문에  이대로 사용한다면 에러가 난다.

 

 

 useEffect(() => {
        axios.get('http://localhost:5000/api/hello')
            .then(response => console.log(response.data))
    }, [])

이를 해결하기 위해 5000번으로 요청을 보내도 여전히 에러가 난다.

이는 CORS 정책 때문이다. 외부에서 요청을 보내면 보안상의 이슈가 있을 수 있기 때문에 CORS 정책이 필요하다.
(CORS란? : Cross-Origin Resource Sharing의 약자로 서로 다른 Origin 사이에서 자원을 공유할 때 사용되는 정책)

 

 

Proxy로 CORS 해결

CORS를 해결하기 위해서 proxy 서버를 이용하는 방법을 사용하였다.

 

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

Proxying API Requests in Development | Create React App

 

npm install http-proxy-middleware --save

먼저 http-proxy-middleware 를 설치해준다.

 

// client/src/setupProxy.js

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

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

proxy 설정을 추가해줌으로 /api로 시작되는 API는 target으로 설정된 서버 URL로 호출하도록 설정된다.

changeOrigin 설정은 대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정해주는 옵션이다.