인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

youakdl님의 프로필 이미지
youakdl

작성한 질문수

Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"

axios 모듈 & Vite 환경 변수 설정 (env)

Request URL:주소 이상함!

해결된 질문

작성

·

187

0

const fetchPost = async () => {

try {

const { data, headers } = await getPosts(params.value);

items.value = data;

totalCount.value = headers['x-total-count'];

} catch (error) {

console.error(error);

}

};

TheHeader.vue에서 게시판 클릭 시 PostListView.vue 부분에서 오류가 납니다. 위의 에러콘솔부에 걸려요.

개발자도구에서 콘솔에 찍힌 코드는 하기와 같습니다ㅠㅠ

AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUES........}

 

requestURL :

GET http://localhost:5173/undefinedposts/?_sort=createdAt&_order=desc&_limit=3&_page=1&title_like= 404 (Not Found)


왜 주소가 위와 같이 찍히는지 모르곘어요!!

 

제이슨 서버 동작 확인했고, development 모드입니당 ㅠㅠ

답변 1

0

짐코딩님의 프로필 이미지
짐코딩
지식공유자

안녕하세요.

http://localhost:5173/undefinedposts/?_sort=createdAt&_order=desc&_limit=3&_page=1&title_like=

위에 호출 경로를 보시면 Path가 /undefinedposts/ 인걸 확인할 수 있습니다.

"게시글 목록을 조회하는 코드(getPosts 함수 내부 axios 호출 부분)"를 확인해 해보시면 바로 찾을 수 있을 것 같습니다.

감사합니다.

 

youakdl님의 프로필 이미지
youakdl
질문자

선생님!! 문제 해결했습니다.

 

.env와 .env.development 파일을 루트레벨이 아닌 src하위에 만들었더라구요! 그래서 export const posts = create(`${import.meta.env.VITE_APP_API_URL}posts`);

${import.meta.env.VITE_APP_API_URL} 이 부분 콘솔 찍어보니 값이 안나왔었어요!

빠른 회신 감사드립니다.

 

 

youakdl님의 프로필 이미지
youakdl

작성한 질문수

질문하기