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에 대한 요청을 하는 부분이다.
전체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에러를 해결하였다.
해당 api를 요청하면서 상대/절대 경로의 문제로 404 error를 맞이하다, 문제 해결 후 401, 403 error를 맞이하게 된다.
그 중에서도 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