Vue.js 400에러, 405 에러, 500에러 해결방법

계속 이런 에러가 발생해서 미칠 노릇이었다. 실제로 구동하는데 눈에 띄지는 않아서 일단 콘솔창에서만 뜨게 해놓고 다른 기능을 하고 있었는데... 

 

 

 

원인은 매우 간단했다. 

검색해보니 400, 500, 405 에러는 서버랑 원활히 송수신이 안돼서 발생하는 문제라는 것을 보았다. 

코드를 다시 분석하던 중에,,,아주 멍청한 실수를 했다는 것을 발견했다.

익숙하지 않은 Promise 를 쓰다보니 위에서 promise 가 위에서 const self = this; 를 append 해줄 것이라 생각했다.

당연함. 경로가 올바르지 않았음 !!

 

const self = this;

즉, 코드 한줄 추가했더니 에러가 싹 사라졌다. 

간만에 보는 클린한 콘솔창 ㅜ0ㅜ

 

나와같은 문제가 발생하는 분들, 경로 잘 확인해보세요ㅜ

이 실수를 발견할 수 있었던 이유... 한번 이랬던게 아님 ㅋ 다른데서도 실수했다가 고치고 여기도 혹시나?! 하고 찾아보니 ... 

또 실수하지 않기 위해 포스팅을 작성한다 !!

 

......
promises.push(promise);
});
Promise.all(promises)
                .then(function () {
                    // console.log('모든 비동기 요청 완료');



                    self.list.forEach(function (order) {
                        // console.log(self.list);
                        const recruitEndPeriodFormatted = dayjs(order.recruit_endperiod).format('YYYY-MM-DD');
                        self.recruit_endperiod = recruitEndPeriodFormatted;
                        order.recruit_endperiod = recruitEndPeriodFormatted;
                        const subEnddateFormatted = dayjs(order.subscribe_enddate).format('YYYY-MM-DD');
                        self.subscribe_enddate = subEnddateFormatted;
                        self.recruitpeople = order.recruitpeople
                        self.total_people = order.total_people
                        self.total_point = order.total_point

                        if (order.recruitpeople === order.total_people && self.currentDate > self.recruit_endperiod) {
                            // 인원수 같음 & 모집일 지남
                            order.flag = 1;

                        } else if (order.recruitpeople !== order.total_people && self.currentDate > self.recruit_endperiod) {
                            // 인원수 다름 & 모집일 지남
                            order.flag = 2;
                            //한구독의 전체금액 
                            // point basket & cash 관리 
                            // 취소된 사항 ( 모두의 예치금 전부 빼고, 각자에게 돈 돌아가기 )
                            if (self.point_basket != 0) {
                                
                                const price = order.total_point / self.total_people
                                console.log(price)
                                const form = new FormData();
                                form.append('price', price)
                                form.append('email', self.email)
                                console.log(self.email)
                                self.$axios.post('http://localhost:8181/payment/' + self.email, form)
                                    .then(function (res) {
                                        if (res.status == 200) {
                                            console.log('모집 종료로 금액 반환 되었음')
                                            self.$axios.patch('http://localhost:8181/subscribeparty/money/' + order.subscribe_num)
                                                .then(function (res) {
                                                    if (res.status === 200) {
                                                        console.log('취소돼서 0으로 만들고 돌아감');
                                                    }
                                                })
                                                .catch(function (error) {
                                                    // 에러 처리
                                                    console.error('에러 발생:', error);
                                                });
                                        } else {
                                            alert('오류')
                                        }
                                    });
                            } else {
                                console.log('이미 실행됨');
                            }
......