AxiosError {message: 'Request failed... - 인프런

로그인 페이지에서 로그인을 하면 500, 커뮤니티 생성 페이지에서 생성을 하면 401 AxiosError가 뜹니다.

<login.tsx>

import axios from 'axios';
import InputGroup from '../components/InputGroup'
import Link from 'next/link'
import { useRouter } from 'next/router';
import React,{ FormEvent, useState } from 'react'
import { useAuthDispatch } from '../context/auth';

axios.defaults.withCredentials = true;

const Login = () => {
    let router = useRouter();
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const [errors, setErrors] = useState<any>({});

    const dispatch = useAuthDispatch();

    const handleSubmit = async (event: FormEvent) => {
        event.preventDefault();
        try{
            const res = await axios.post("/auth/login", {password, username}, {headers: {'Access-Control-Allow-Origin': 'http://localhost:3000'}})
            dispatch("LOGIN", res.data?.user);

        } catch(error: any){
            //console.log(error);
            setErrors(error.response?.data || {})
        }
    }

    return (
        <div className='bg-white'>
            <div className='flex flex-col items-center justify-center h-screen p-6'>
                <div className='w-10/12 mx-auto md:w-96'>
                    <h1 className='mb-2 text-lg font-medium'>로그인</h1>
                    <form onSubmit={handleSubmit}>
                        <InputGroup 
                            placeholder='Username'
                            value={username}
                            setValue={setUsername}
                            error={errors.username}
                        />    
                        <InputGroup 
                            placeholder='Password'
                            value={password}
                            setValue={setPassword}
                            error={errors.password}
                        />                                   
                        <button className='w-full py-2 mb-1 text-xs font-bold text-white uppercase bg-gray-400 border border-gray-400 rounded'>
                            로그인
                        </button>
                    </form>
                    <small>
                        아직 아이디가 없으신가요?
                        <Link href="/register" legacyBehavior>
                            <a className='ml-1 text-blue-500 uppercase'>회원가입</a>
                        </Link>
                    </small>
                </div>
            </div>            
        </div>
    )
}

export default Login

<create.tsx>

import axios from "axios";
import { GetServerSideProps } from "next";
import InputGroup from "../../components/InputGroup"
import {useState, FormEvent} from "react";
import {useRouter} from "next/router"

axios.defaults.withCredentials = true;

const SubCreate = () => {
    const [name, setName] = useState("");
    const [title, setTitle] = useState("");
    const [description, setDescription] = useState("");
    const [errors, setErrors] = useState<any>({});
    let router = useRouter();

    const handleSubmit = async (event: FormEvent) => {
        event.preventDefault();

        try {
            const res = await axios.post("/subs", {name, title, description}, {headers: {'Access-Control-Allow-Origin': 'http://localhost:3000'}})

            router.push(`/r/${res.data.name}`);
        } catch (error: any) {
           // console.log(error);
            setErrors(error.response?.data || {});
        }
    }

    return (
        <div className="flex flex-col justify-center pt-16">
            <div className="w-10/12 mx-auto md:w-96">
                <h1 className="mb-2 text-lg font-medium">
                    그룹 만들기
                </h1>
                <hr />
                <form onSubmit={handleSubmit}>
                    <div className="my-6">
                        <p className="font-medium">Name</p>
                        <p className="mb-2 text-xs text-gray-400">
                            그룹 이름은 변경할 수 없습니다.
                        </p>
                        <InputGroup 
                            placeholder="이름"
                            value={name}
                            setValue={setName}
                            error={errors.name}
                        />
                    </div>
                    <div className="my-6">
                        <p className="font-medium">Title</p>
                        <p className="mb-2 text-xs text-gray-400">
                            주제를 입력해 주세요.
                        </p>
                        <InputGroup 
                            placeholder="주제"
                            value={title}
                            setValue={setTitle}
                            error={errors.title}
                        />
                    </div>
                    <div className="my-6">
                        <p className="font-medium">Description</p>
                        <p className="mb-2 text-xs text-gray-400">
                            그룹에 대한 설명을 입력해주세요.
                        </p>
                        <InputGroup 
                            placeholder="설명"
                            value={description}
                            setValue={setDescription}
                            error={errors.description}
                        />
                    </div>
                    <div className="flex jstify-end">
                        <button
                            className="px-4 py-1 text-sm font-semibold rounded text-white bg-gray-400 border"
                        >
                            그룹 만들기
                        </button>
                    </div>
                </form>
            </div>
        </div>
    )
}

export default SubCreate

<subs.ts>

import {Router, Request, Response} from "express";
import jwt from "jsonwebtoken"
import { User } from "../entities/User";
import userMiddleware from "../middlewares/user"
import authMiddleware from "../middlewares/auth"
import { AppDataSource } from "../data-source";
import Sub from "../entities/Sub";
import { isEmpty } from "class-validator";

const createSub = async (req: Request, res: Response, next) => {
    const {name, title, description} = req.body;

    try {
        let errors: any = {};
        if (isEmpty(name)) errors.name = "이름은 비워둘 수 없습니다.";
        if (isEmpty(title)) errors.title = "제목은 비워둘 수 없습니다.";

        const sub = await AppDataSource.getRepository(Sub)
        .createQueryBuilder("sub")
        .where("lower(sub.name) = :name", { name: name.toLowerCase() })
        .getOne();
  
      if (sub) errors.name = "서브가 이미 존재합니다.";
      if (Object.keys(errors).length > 0) {
        throw errors;
      }
    } catch (error) {
      console.log(error);
      return res.status(500).json({ error: "문제가 발생했습니다." });
    }
    
    try {
        const user: User = res.locals.user;
    
        const sub = new Sub();
        sub.name = name;
        sub.description = description;
        sub.title = title;
        sub.user = user;
    
        await sub.save();
        return res.json(sub);
      } catch (error) {
        console.log(error);
        return res.status(500).json({ error: "문제가 발생했습니다." });
      }

};

const router = Router();

router.post("/", userMiddleware,authMiddleware, createSub);

export default router;

<server.ts>

import express, { response } from "express";
import morgan from "morgan";
import { AppDataSource } from "./data-source";
import authRoutes from './routes/auth'
import subRoutes from './routes/subs'
import cors from 'cors';
import dotenv from 'dotenv';
import cookieParser from "cookie-parser";

const app = express();
const origin = process.env.ORIGIN;
const corsOption = {
    origin: "http://localhost:3000",
    credentials: true
}

app.use(cors(corsOption))

app.use(express.json());
app.use(morgan('dev'));
app.use(cookieParser());

dotenv.config();

app.get("/", (_, res) => {res.send("running")});
app.use("/api/auth", authRoutes)
app.use("/api/subs", subRoutes)
console.log(process.env.ORIGIN)

let port = 4000;
app.listen(port, async () => {
    console.log('server running at http://localhost:${port}');
    
    AppDataSource.initialize().then(async () =>{
        console.log("database initialized")
    }).catch(error => console.log(error))

})

안녕하세요, 인프런 AI 인턴입니다. 우오앙님께서 겪고 계신 문제는 Axios를 사용한 HTTP 요청에서 자주 발생하는 질문입니다. AxiosError와 관련하여 서버와의 통신에 문제가 발생할 때 주로 나타나는 오류이며, 이를 해결하기 위해 몇 가지 점을 확인해 보시면 좋습니다.

서버 엔드포인트 확인:
- 클라이언트 측에서 사용하고 있는 API 엔드포인트가 서버와 일치하는지 확인해주세요. 로컬호스트를 사용 중이라면 포트나 URL 경로가 맞는지 다시 한번 검토해보세요.
CORS 설정:
- 동일 출처 정책으로 인해 발생할 수 있는 CORS 문제를 확인해 보세요. 특히, withCredentials: true를 사용할 경우, 서버 측에 CORS 설정이 적절히 되어있는지 확인해야 합니다.
서버 로그 확인:
- 서버 터미널 혹은 로그 파일에서 정확한 오류 메시지를 살펴보시면 원인을 찾기 쉬울 수 있습니다. 500 에러의 경우 서버 측 코드 오류일 가능성이 큽니다.
유효성 검사:
- 회원가입이나 로그인 시, 입력된 데이터가 백엔드에서 요구하는 포맷과 일치하는지 확인하세요. 주로 400 에러는 잘못된 입력으로 발생합니다.
인증 관련 설정:
- 로그인이나 커뮤니티 생성 시 401 에러가 발생한다면, 인증 토큰 (JWT 등)이 제대로 설정되었는지 확인해주세요. 로그인 후 토큰을 받는지, 이를 요청 헤더에 포함하고 있는지 검토하세요.

관련된 유사 질문과 해결 방법을 확인해 보시려면 아래 링크들을 참조하세요:

질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

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

AxiosError {message: 'Request failed with status code 401/500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE',