form.submit()와 axios.post() 데이터 전송의 포맷차이

 

form.submit()와 axios.post()는 서로 다른 방식으로 데이터를 전송합니다.

HTML form.submit()

• HTML 폼을 사용하여 데이터를 제출할 때, 사용자가 입력한 데이터는 기본적으로 application/x-www-form-urlencoded 형식으로 서버에 전송됩니다.
• 예를 들어, 사용자가 입력한 username과 password가 있다면, 서버에 보내는 데이터는 다음과 같은 형식입니다
•  

username=사용자명&password=비밀번호

 

Axios axios.post()

• Axios를 사용하여 POST 요청을 보낼 때, 기본적으로 JSON 형식으로 데이터를 전송합니다.
• 위의 예시에서 axios.post()를 사용할 경우, 데이터는 다음과 같은 JSON 형식으로 전송됩니다
•  

{
    "username": "사용자명",
    "password": "비밀번호"
}

 

 

 

정리하자면

이둘은 전송하는 포맷의 차이가 있고

 

• html form.submit()은 application/x-www-form-urlencoded 형식으로 데이터를 전송하고
• axios.post()는 JSON 형식으로 데이터를 전송한다

서버가 포맷을 지원해야 전송된 데이터를 처리할 수 있습니다.

 

 

---

Axios를 사용하여 데이터를 application/x-www-form-urlencoded 형식으로 전송하기

데이터를 URL 인코딩한 후 Content-Type 헤더를 설정해야 합니다

 

1. 첫번째방법 qs 라이브러리 사용

qs라이브러리는 객체를 쿼리 문자열로 쉽게 변환합니다.

npm install qs

 

import axios from 'axios';
import qs from 'qs';

const login = async (username, password) => {
    try {
        const res = await axios.post(
            "http://localhost:9000/auth/login",
            qs.stringify({
                username,
                password,
            }),
            {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                withCredentials: true, // 쿠키를 포함하고 싶다면 추가
            }
        );
        console.log('로그인 성공:', res.data);
    } catch (error) {
        console.error('로그인 오류:', error);
    }
};

 

 

2. URL 인코딩 수동 처리

encodeURIComponent를 사용하여 각 필드를 인코딩한 후 문자열을 직접 구성합니다.

 

const login = async (username, password) => {
    try {
        const data = `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`;

        const res = await axios.post(
            "http://localhost:9000/auth/login",
            data,
            {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                withCredentials: true, // 쿠키를 포함하고 싶다면 추가
            }
        );
        console.log('로그인 성공:', res.data);
    } catch (error) {
        console.error('로그인 오류:', error);
    }
};