[React] Axios로 회원가입 POST요청하기(CORS 에러)

현재 진행중인 프로젝트에서 간단한 회원가입 양식을 Axios를 통해 서버로 POST요청을 보내보았다.

프로젝트는 Styled-component와 Vite를 사용해 TypeScipt로 구현하고 있다. POST요청시에 발생했던 CORS에러를 클라이언트에서 처리하는 방식도 간단히 언급해보려고 한다.

 

 

회원가입 페이지

 

먼저 기본적인 회원가입 데이터를 입력하는 양식을 아래 코드와 같이 작성하였다.

// 회원가입 양식
return(
    <SignUpBox>
        <InfoBox>
            <p>이름</p>
            <label>
                <InputBox 
                    type='text' 
                    name="loginId" 
                    value={loginId} 
                    onChange={onChange} 
                    placeholder='이름을 입력하세요' 
                    required
                />
            </label>
        </InfoBox>
        <InfoBox>
            <p>아이디</p>
            <label>
                <InputBox 
                    type='text' 
                    name="nickname" 
                    value={nickname} 
                    onChange={onChange} 
                    placeholder='아이디를 입력하세요' 
                    required
                />
            </label>
        </InfoBox>
        <InfoBox>
            <p>비밀번호</p>
            <label>
                <InputBox 
                    type='password' 
                    name="password" 
                    value={password} 
                    onChange={onChange} 
                    placeholder='비밀번호를 입력하세요' 
                    required
                />
            </label>
        </InfoBox>
        <InfoBox>
            <p>비밀번호 확인</p>
            <label>
                <InputBox 
                    type='password' 
                    name="passwordconfirmation" 
                    value={passwordConfirmation} 
                    onChange={onChange} 
                    placeholder='비밀번호를 한 번 더 입력하세요' 
                    required
                />
            </label>
        </InfoBox>
        
        <ButtonBox>
            <ButtonStyle type='submit' onClick={handleGoBack}>취소</ButtonStyle>
            <ButtonStyle 
                type='submit' 
                onClick={onSubmit} 
                value={isLoading? "Loading..." : "Create Account"} 
                bgColor="#38E788"
                clickColor="#2fc673" 
                color="#FFFFFF"
            >
                가입하기
            </ButtonStyle>
        </ButtonBox>
        
        {error !== ""? <Error>{error}</Error>: null}
        
    </SignUpBox>        
)

 

이름, 아이디, 비밀번호, 비밀번호 확인 입력값이 변경될때 onChange함수 하나로 다루기 위해, 각 Input마다 name값을 받아서 어떤 데이터 값을 처리할지 구분자로 사용하였다.

 

 

onChange 이벤트 핸들러

각 입력 필드의 값이 변경될 때, 입력 필드의 name 속성에 기반하여 해당 상태 변수를 업데이트하는 함수이다.

const [loginId, setLoginId] = useState("");
const [nickname, setNickname] = useState("");
const [password, setPassword] = useState("");
const [passwordConfirmation, setPasswordConfirmation] = useState("");

//입력 값 변경시 이벤트 처리
const onChange = (e:ChangeEvent<HTMLInputElement>)=>{
    const {
        target:{name, value},
    } = e
    
    if(name === "loginId"){
        setLoginId(value);
    }else if(name ==="nickname"){
        setNickname(value);
    }else if(name === "password"){
        setPassword(value);
    }else if(name === "passwordconfirmation"){
        setPasswordConfirmation(value);
    }
};

 

 

 

POST 요청하기

Axios를 사용하여 서버의 회원가입 페이지로 POST 요청을 보내는 함수이다.  '회원가입' 버튼을 클릭하면 해당 함수가 호출되어 서버로 사용자의 입력 데이터들이 전송된다.

//회원가입 데이터 POST요청
const handleSignUp = async() => {
    try{
        await axios.post("/members/signup",{
            loginId,
            nickname,
            password,
            passwordConfirmation,
        });

    }catch(error){
        console.log(error);
    }
};

 

 

회원가입 버튼을 누르면 각 입력값이 모두 존재하는지 확인 후 POST요청을 보내고, 취소 버튼을 누르면 이전페이지로 이동한다.

서버에서 기본적인 유효성검사를 처리하기로 했기 때문에 빈 입력 데이터에 대한 에러만 처리하였다.

const [isLoading, setLoading] = useState(false);
const [error, setError] = useState("");
const navigate = useNavigate();

//제출 버튼 클릭시 간단한 유효성 검사 후 데이터 처리
const onSubmit = () => {
    if(isLoading || loginId==="" || nickname ==="" || password===""){
        setError("기본정보를 모두 입력하세요")
        return;
    }

    try {
        setLoading(true);

        handleSignUp()
          .then(() => {})
          .catch((error) => {
            console.log(error);
          });

      } catch (e) {
        console.log(e);
        setError(String(e));

      } finally {
        setLoading(false);
      }
};

//취소버튼 클릭시 이전페이지로 이동
const handleGoBack = () => {
    navigate(-1);
};

 

 

 

CORS에러 처리

CRA방식과 Vite방식에서 CORS에러를 처리하는 방식이 다르다.

(이 사실을 모르고 CRA방식으로 처리해서 몇 시간을 버렸다....)

 

CRA방식은 package.json파일에 proxy: ”http://localhost:8080”으로 설정하고(서버주소) POST요청을 보낼 url에는 endpoint만(/members/signup) 작성하면 된다. 이렇게 하면 프록시서버가 클라이언트에서 3000번으로 보낸 요청을 8080번으로 변경시켜서 서버로 요청을 보내준다.

 

Vite방식의 proxy 설정은 Vite.config.ts에서 아래와 같이 작성하면 된다.

proxy: {
      "/members": {
        target: "<http://localhost:8080>",
      }

 

이렇게 하면, /members로 시작하는 요청은 http://localhost:8080으로 프록시된다. 

 

 

성공!

 

 

좀 더 다양한 옵션을 적용하려면 공식사이트를 참고하면 좋을 것이다. 
https://ko.vitejs.dev/config/server-options.html