[Javascript] Post 방식으로 데이터 전송

1. POST 방식의 필요성

[HTTP 메소드] GET 방식의 URL 파라미터 노출

 GET 방식은 클라이언트에서 서버로 데이터를 전달할 때 주소 뒤에 이름과 값이 결합된 쿼리 스트링으로 전달하는 전송 방식이다. POST 방식보다 상대적으로 전송 속도가 빠르지만 주소창에 쿼리 스트링이 그대로 보이기 때문에 보안성이 떨어진다.

 

이런 보안를 해결하기 위해 POST 방식을 사용한다.

POST 방식은 URL에 파라미터를 노출하지 않기위해 body에 데이터를 넣어 보낸다.

 

2. Javascript에서 POST 방식으로 보내는 방법

function sendPost(url){
        let form = document.createElement('form'); // 동적 form 생성
        form.method = 'post'; // post 메서드 입력 
        form.action = url; // 데이터를 전송할 url 입력
        document.body.appendChild(form); // body에 form 추가

        // key, value로 이루어진 객체 params
        const params = { 
            key1: "value1",
            key2: "value2",
            key3: "value3"
        }

        // input 생성&세팅
        for (const key in params){ 
            const formField = document.createElement('input'); // 동적 input 생성
            formField.type = 'hidden'; 
            formField.name = key; 
            formField.value = param[key];
            form.appendChild(formField); // form에 input 추가
        }
        form.submit(); // 전송
}