프록시 설정(setupProxy) 절대/상대 경로 & Axios Del header/data request 401, 403 error

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

module.exports = function (app) {
  app.use(
    createProxyMiddleware("/api", {
      target: "서버쪽url:포트",
      changeOrigin: true,
      pathRewrite: {
        "^/api": "",
      },
    })
  );
};

먼저 setupProxy.js에 대한 설정이고,

  const deleteNotice = async (group_id, notice_id) => {
    return api
      .delete(
        "/api/delete할 api",
        {
          headers: authHeader(), // header에 token 저장
          data: {
            group_id: group_id,
            notice_id: notice_id,
          },
        }
      )
      .then(
        (res) => {
          console.log(res.data);
        },
        (error) => console.log(error.response.data.error)
      );
  };

해당 delete api에 대한 요청을 하는 부분이다.

del 요청에서 크게 2가지 실수가 있었는데 "api 주소 요청부분"과 header에 토큰 저장하는 부분이었다.

1. 절대경로/상대경로

절대경로

전체URL
https://www.google.com/search?q=google&oq=google&aqs=chrome..69i57j69i60j69i65l3.906j0j15&sourceid=chrome&ie=UTF-8

절대경로는 URL을 참조하는 문서가 어느 컴퓨터에 있던 상관없이 항상 특정 자원을 불러올 수 있도록 작성하는 형식으로 URL 전체를 작성하는 방법

상대경로

상대 경로는 현재 작성하는 문서를 기준으로 자원의 경로를 지정

asset/image/image.jpg

./asset/image/image.jpg

/ 없거나 ./ 로 시작되면 작성 중인 문서가 있는 현재 위치에서 하위디렉트리 asset 디렉토리를 찾고 그 하위 디렉토리인 image 디렉토리 밑에 image.jpg 자원을 지정하고 있다. 1,2 두 개의 URL은 동일한 의미

---

Error 해결 후🟢
axios.delete('/api/delete할 api')
이거는 http://홈페이지주소.com/api/delete 할 api 여기서 가져오라는 뜻이고
Error 해결 전❌
axios.delete('api/delete할 api')
이거는 http://홈페이지주소.com/현재경로/api/delete 할 api 여기서 가져오라는 뜻이라서
상대경로 절대경로의 실수를 알아차리고 404에러를 해결하였다.

2. header에 토큰 저장하는 부분

해당 api를 요청하면서 상대/절대 경로의 문제로 404 error를 맞이하다, 문제 해결 후 401, 403 error를 맞이하게 된다.

• 401 Unauthorized
  - 로그인 등 인증 과정을 거치지 않은 Anonymous 유저의 작업을 진행할 수 없음
• 403 Forbidden
  - 서버가 요청을 이해하였으나, 클라이언트에게 필요한 권한이 없는 등의 사유로 인해 작업을 진행할 수 없음
  

그 중에서도 403에러가 주를 이뤘는데 그러니까 서버쪽에 요청은 간것이나 사용자 인증 과정에서 header에 토큰 저장문제로 에러가 계속 나는 것이었다.

본인은 이런식으로 적고었었다.
Error 해결 전 ❌

axios.delete(URL, 
  {
    headers: authHeader() // token 반환
  },
  { // body에 data요청 부분
    group_id,
    notice_id,
  }
);

StackOverflow에서는

axios.delete(URL, {
  headers: {
    Authorization: authorizationToken
  },
  data: {
    source: source
  }
});

라는 해결책을 주었고 해결책을 반영하니 해결되었다,
Error 해결 후 🟢
참고로 headers 설정은 url 다음 인자인 2번쨰 인자에 설정하는 것도 에러 해결에 도움이 되었다.

axios.delete(URL, {
  headers: authHeader(), // header에 token 저장
  data: {
    group_id: group_id,
    notice_id: notice_id,
	},
});

참조: https://usingu.co.kr/frontend/url%EA%B3%BC-%EC%83%81%EB%8C%80%EA%B2%BD%EB%A1%9C-%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C/,
https://ingnoh.tistory.com/114,
https://stackoverflow.com/questions/51069552/axios-delete-request-with-request-body-and-headers