[React] POST & GET - Axios 통신

431에러가 계속 발생했다.
Header Requset가 너무 커서 계속 서버 에러가 발생했다.
1. 크롬 쿠키 캐시 삭제
2. "start": "react-scripts --max-http-header-size=1024 start",
이것 저것 해봤지만, 계속 발생했다. (사실 헤더에 그렇게 많이 담아 보내는거 자체가 이상한거였는데...ㅎㅎ)
POST 형식으로 변경 해서 해결.

POST

server.js
const bodyParser = require("body-parser");

// bodyParser 미들웨어 사용
app.use(bodyParser.json()); // JSON 형식의 요청 본문을 파싱
app.use(bodyParser.urlencoded({ extended: true })); // URL-encoded 요청 본문을 파싱

let lastCardTypeChk = null;
app.post("/api/categoryCount", (req, res) => {

  let { item: checkedList, cardTypeChk } = req.body;
  if (!cardTypeChk && lastCardTypeChk) {
    cardTypeChk = lastCardTypeChk;
  }
  let query = "";
  if (cardTypeChk) {
    if (!checkedList || !Array.isArray(checkedList)) {
      query = `SELECT * FROM cardAll WHERE cardType = '${cardTypeChk}'`;
    } else {
      const categories = checkedList.join("','");
      if (cardTypeChk) {
        query = `SELECT * FROM cardAll WHERE benefit IN ('${categories}') and cardType = '${cardTypeChk}'`;
      } else {
        query = `SELECT * FROM cardAll WHERE benefit IN ('${categories}')`;
      }
    }
  } else {
    query = `SELECT * FROM cardAll`;
  }
  db.query(query, (err, result) => {
    if (!err) {
      lastCardTypeChk = cardTypeChk;
      res.send(result);
    } else {
      res.status(500).send("Internal Server Error");
    }
  });
});

Component

export const asyncUpFetch = createAsyncThunk(
  "filter/asyncUpFetch",
  async ({ item, cardTypeChk }) => {
    try {
      const response = await Axios.post("/api/categoryCount", {
        item,
        cardTypeChk,
      });
      return response.data;
    } catch (e) {
      console.log(e);
      console.log("asyncUpFetch ERROR 데이터를 받아올 수 없습니다.");
      throw e;
    }
  }
);


dispatch(asyncUpFetch({ item: checkedList, cardTypeChk: type }));

GET

server.js

let lastCardTypeChk = null;
app.post("/api/categoryCount", (req, res) => {
  console.log(req);
  const checkedList = req.query.item;
  let cardTypeChk = req.query.cardTypeChk;
  if (!cardTypeChk && lastCardTypeChk) {
    // 이전 호출에서 받은 cardTypeChk 값이 있으면 사용
    cardTypeChk = lastCardTypeChk;
  }
  let query = "";
  if (cardTypeChk) {
    if (!checkedList || !Array.isArray(checkedList)) {
      query = `SELECT * FROM cardAll WHERE cardType = '${cardTypeChk}'`;
    } else {
      const categories = checkedList.join("','");
      if (cardTypeChk) {
        query = `SELECT * FROM cardAll WHERE benefit IN ('${categories}') and cardType = '${cardTypeChk}'`;
      } else {
        query = `SELECT * FROM cardAll WHERE benefit IN ('${categories}')`;
      }
    }
  } else {
    query = `SELECT * FROM cardAll`;
  }
  db.query(query, (err, result) => {
    if (!err) {
      lastCardTypeChk = cardTypeChk;
      res.send(result);
    } else {
      res.status(500).send("Internal Server Error");
    }
  });
});


component 

export const asyncUpFetch = createAsyncThunk(
  "filter/asyncUpFetch",
  async ({ item, cardTypeChk }) => {
    try {
      const response = await Axios.get("/api/categoryCount", {
        params: { item, cardTypeChk }, // 배열을 파라미터로 넘겨줍니다.
      });
      return response.data;
    } catch (e) {
      console.log(e);
      console.log("asyncUpFetch ERROR 데이터를 받아올 수 없습니다.");
      throw e;
    }
  }
);

dispatch(asyncUpFetch({ item: checkedList, cardTypeChk: type }));