클라이언트에서 axios를 이용해서 서버와 http통신을 하는데 404오류가 나는 이유를 모르겠습니다.(재업)

Question

postman으로 요청 보내면 이상없는것을 확인할 수 있는데 코드에 문제가 분명히 있는데 어딘지 도무지 모르겠습니다..import React, { useState, useEffect, useContext } from "react"; import * as S from "./AdminStyledComponents"; import { Modal } from "../../components/Modal/Modal"; import deepCopy, { supplement_type } from "./../../types/Type"; import { loginPostAPI, supplementAPI } from "../../apis/API"; const Admin = () => { const [modal, setModal] = useState(false); const dummy_supplement_type = deepCopy(supplement_type); // JSON 형식으로 변환된 type const [supplementBatch, setSupplementBatch] = useState([]); // 서버에 저장되어있는 supplement 객체 const [supplement, setSupplement] = useState(supplement_type); // 선택된 보충제 const [supplementId, setSupplementId] = useState(""); // 선택된 보충제 id const [currentPage, setCurrentPage] = useState(1); // 페이지 이동 const TabMenu = ["Supplement", "Workout", "BodyPart", "Machine"]; const CategoryList = [ "englishName", "koreanName", "flavor", "price", "servings", "조회", "수정", "삭제", ]; // dummydata const DataItemInfo = [ [ "(MY PROTEIN) impact WHEY PROTEIN", "(마이 프로틴) 임팩트 웨이 프로틴", "무맛", "20900 ￦", 40, "조회", "수정", "삭제", ], [ "(MY PROTEIN) impact WHEY PROTEIN", "(마이 프로틴) 임팩트 웨이 프로틴", "무맛", "20900 ￦", 40, "조회", "수정", "삭제", ], [ "(MY PROTEIN) impact WHEY PROTEIN", "(마이 프로틴) 임팩트 웨이 프로틴", "무맛", "20900 ￦", 40, "조회", "수정", "삭제", ], ]; // CRUD 될때마다 데이터 업데이트 const loadSupplementBatch = async () => { // 전체조회(데이터 10개 가져옴) const supplementResponse = await supplementAPI.get(`/list/${currentPage}`); const fitData = supplementResponse.data.map((obj) => { // 받아온 데이터에 보충제 타입 추가 return { ...supplement_type, ...obj, }; }); // 데이터 갱신 setSupplementBatch(fitData); }; loadSupplementBatch(1); return ( {modal && setModal(false)} setModal={setModal} />} {TabMenu.map((tab) => { return {tab}; })} {CategoryList.map((category) => { return {category}; })} {DataItemInfo.map((datas) => { return ( {datas.map((data, index) => { if (index < 5) { return {data}; } else { return {data}; } })} ); })} Prev Next { setModal(!modal); }} > 추가 ); }; export default Admin; 위의 코드에서 const loadSupplementBatch = async () => { // 전체조회(데이터 10개 가져옴) const supplementResponse = await supplementAPI.get(`/list/${currentPage}`); const fitData = supplementResponse.data.map((obj) => { // 받아온 데이터에 보충제 타입 추가 return { ...supplement_type, ...obj, }; }); // 데이터 갱신 setSupplementBatch(fitData); }; loadSupplementBatch(1);이 부분이 http통신을 하는 곳인데 get요청시마다 404 에러가 뜹니다.다음은 API 코드입니다.export const supplementAPI = axios.create({ baseURL: "/admin/supplements", withCredentials: true, });다음은 Network탭의 오류 정보입니다.이전에 로그인 세션얻는것은 잘 됩니다. //post요청 let response; response = await loginAdminPostAPI.post("", submission); //ok / fail check const responseStatus = response.data; if (responseStatus === "ok") { //cookie와 관련된 logic localStorage.setItem("loginId", submission.id); return redirect("/"); } else { return { error: "Wrong login Info" }; }질문이 개떡같지만 도와주시면 감사하겠습니다ㅠ ㅠ

Clickin · Answer

Postman 요청은 외부 ip처럼 생겼고 포트도 8080인데 개발하신 코드에서는 localhost에 3000번 포트로 날라가네요이렇게 구현하시면 postman으로는 정상동작하는데 코드로는 안된다고 할 수 없죠일반적으로 로컬 개발서버를 돌리거나 노드 프로젝트를 돌릴 때 보편적으로 사용하는 게 3000번 포트인걸 미루어보면로그인 세션 얻는건 잘 됩니다 하는 부분도 로컬 프론트 개발서버에 GET 날리는거 아닌가 점검해보시고요baseurl을 상대경로로 지정하시면 당연히 프론트 서버 기준으로 동작합니다.추후 백엔드 서버에 통합시켜서 하나로 동작시키실거면 proxy 알아보시고아니면 개발단계에서는 baseurl에 ip까지 명시하셔야합니다. 근데 이러면 cors 문제가 따라올거에요

클라이언트에서 axios를 이용해서 서버와 http통신을 하는데 404오류가 나는 이유를 모르겠습니다.(재업)

1개의 답변

Q&A 목록