[MERN] 서버 - 클라이언트간 요청 / Axios 통신, CORS문제 Proxy 설정

axios 설치

npm install axios --save

http-xproxy-middleware 설치

npm install http-proxy-middleware --save

 

 

서버 포트는 5002번, 클라이언트 포트는 3001번으로 분리되어있는 상태

 

server단 index.js 서버 포트번호

const port = 5002;

 

클라이언트단 setupProxy.js에 createProxyMiddleware

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

module.exports = function (app) {
  app.use(
    "/test",
    createProxyMiddleware({
      target: "http://localhost:5002",
      changeOrigin: true,
    })
  );
};

"/test"위치에는 서버의 api path를

target에는 서버의 주소를 넣어준다

 

그리고 통신원하는 클라이언트 단의 페이지에서 axios import해오고 통신요청

List.js (게시판 글 목록을 불러오는 부분에서 떼어온 코드)

import axios from "axios";

useEffect(() => {
    //컴포넌트 생성 시에 훅 -> 여기서 axios 통신
    axios
      .post("test/post/list")
      .then((response) => {
        if (response.data.success) {
          setPostList([...response.data.postList]);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

 

CORS관련해서 잘 정리되어있는 블로그., 너무 잘 참고하였습니다..

https://hannut91.github.io/blogs/infra/cors

CORS란 무엇인가? – Yunseok's Dev Blog