[React] React Web Client 만들기 (2) - 서버통신하기 axios & CORS issue

AXIOS

서버와 통신하기 위해서 axios 라이브러리를 사용하도록 한다. npm을 이용해 라이브러리를 다운받는다.

npm install axios --save

 

landingPage가 오픈될 때 테스트용 api통신을 해보도록 하자. 아래는 LandingPage.js 로, http://localhost:3000/ 으로 접속했을 때 실행되는 스크립트이다. (react-router-dom 을 이용했다. 이전 게시글을 참고)

 

//LandingPage.js
import React, { useEffect } from "react";
import axios from "axios";

function LandingPage() {
  useEffect(() => {
    axios.get("/api/hello").then((res) => {
      console.log(res.data);
    });
  }, []);

  return <div>LandingPage</div>;
}

export default LandingPage;

 

api 주소는 http:localhost:4000/api/hello 이다. 서버쪽의 /api/hello 는 express 로 제작되었으며, 다음과같다. 서버쪽이 궁금하다면 Express+MongoDB 웹서버 를 통해 확인가능하다

app.get("/api/hello", (req, res) => {
  res.send("hi~");
});

 

어쨋든! 이렇게 하면 landingPage를 오픈할때 자동으로 통신을 시도한다. 성공적으로 작동한다면 클라이언트 콘솔에 hi~ 가 찍혀야한다.

근데 아마 정상적으로 안될거다

 

CORS 이슈

나의 경우 웹사이트(react) 의 포트는 3000, 웹서버(express)의 포트번호는 4000번이다. 이렇게 클라이언트와 서버의 포트가 다를 경우, 클라>서버로 요청을 보낼 수 없다. 다른 웹사이트에서 나의 서버에 통신을 마음대로 할 수 있으면 안되겠지?? 

CORS 는 Cross-Origin Resources Sharing 의 약자이다. 이를 해결하는 방법은 다양한데, 나는 그중 프록시를 사용하는 방법을 이용할 것이다.

 

 

PROXY란?

클라이언트에서 통신을 수행하려 할 때 , 프록시가 중간에서 여러 역할을 담당한다.

1. IP를 proxy server에서 임의로 바꿀 수 있다. 인터넷에 접근하는 사람의 ip를 숨길 수 있다. 덕분에 보안이 강화된다.

2. 보내는 데이터를 중간에서 바꿀 수 있다.

3. 그외 방화벽, 웹 필터, 캐쉬 데이터, 공유데이터등을 제공하는 역할을 담당한다. 

 

사용처는?

1. 회사 내의 직원, 혹은 가정 내의 아이들의 인터넷 사용을 제어하는 용도로 사용한다.

2. 캐시를 이용해 더 빠른 인터넷을 제공한다.

3. 이용 제한된 사이트에 접근하도록 도와준다. 

 

따라서 프록시서버를 이용해 포트번호가 달라 발생하는 CORS문제를 해결할수 있다. 중재자 역할인셈. 이제 통신이 안되는 문제를 해결해보자. 먼저 클라이언트쪽에 proxy 라이브러리를 다운받는다.

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:4000",

      changeOrigin: true,
    })
  );
};

 

내가 구현중인 서버 포트는 4000번인데, 각자 자신의 서버포트에 맞게 수정하면된다.

 

package.json에 proxy설정을 추가해준다.

"browserslist": {
    ...
  },
 "proxy": "http://localhost:4000" //이부분!

 

이제 정상적으로 통신이 되는것을 확인한다! 야호~