[React] proxy로 restapi 호출하기

목표

react에서 proxy를 사용하여 다른 포트에서 실행되고 있는 restapi를 호출해보도록 하겠습니다.

초간단 설정

package.json에 다음을 추가합니다.

  "version": "0.1.0",
  "private": true,
  "proxy": "localhost:8080", // 추가
  "dependencies": { 

fetch를 사용하여 spring rest api를 호출해봅니다.

rest api

@RestController
@Slf4j
public class DeviceinfoController {

    @GetMapping("/api/deviceinfo")
    public String deviceInfoList() {
        log.info("deviceInfoList in");
        return "{\n" +
                "\t\"id\": \"id\",\n" +
                "\t\"ip\": \"ip\",\n" +
                "\t\"mac\":\"mac\",\n" +
                "\t\"cpu\":\"cpu\",\n" +
                "\t\"ram\":\"ram\"\n" +
                "}\n";
    }
}

호출부

useEffect(async () => {
  const result = await fetch("http://localhost:8080/api/deviceinfo")
  .then((data) => data.json())
  .catch((err) => console.log(err));
  console.log(result);
}, []);

결과

아래 콘솔에는 데이터가 잘 찍혔으나 Warning이 발생하였습니다.

useEffect를 사용할 때는 비동기 작업을 함수로 래핑한 후 useEffect에 넣어야 합니다.

호출부 수정

  const getTestData = async () => {
    try {
      const data = await fetch("http://localhost:8080/api/deviceinfo")
        .then((res) => res.json())
        .catch((err) => console.log(err));
      console.log(data);
    } catch (err) {
      console.log(err);
    }
  };

  useEffect(() => getTestData, []);

결과 2

잘 호출된 것을 확인할 수 있습니다.

그대로 따라했으나 안될 수 있습니다. 저 역시 다른 pc에서 했을 때는 호출이 제대로 되지 않았습니다. (proxy 설정이 적용되지 않았음)

수동 프록시 설정

자동이 안될 때는 수동이 짱이야(?)
자동이 안되니 수동으로 프록시 설정을 해줍니다.

라이브러리 설치

$ npm i http-proxy-middleware

src/setupProxy.js (파일명 변경 x)

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

// src/setupProxy.js
module.exports = function (app) {
  console.log(createProxyMiddleware);
  app.use(
    createProxyMiddleware("/api", {
      target: "localhost:8080",
      changeOrigin: true,
    })
  );
};

http-proxy-middleware를 사용하여 /api로 시작하는 http 요청을 프록시를 사용하여 localhost:8080 으로 보내주는 역할을 합니다.

결과도 잘 나오는 것을 확인할 수 있습니다.