formdata를 console.log로 찍어도 안 보이는 이유

누구나 formdata를 조작해서 보내기 위해 new formdata()라는 함수를 써 보았을 것이다.

그런데 해당 함수에 데이터를 집어넣고 console.log로 찍어보면 데이터가 보이지 않는다.

이유를 찾아봤더니 결론적으로 브라우저 정책인거 같다.

자세한 이유는 아래 링크를 참고하기 바란다.

https://stackoverflow.com/questions/17066875/how-to-inspect-formdata

하지만 보는 방법이 없는건 아니다.

아래의 함수를 쓰면 key값과 value 값을 볼 수 있다.

for (var key of formData.keys()) {

  console.log(key);

}

for (var value of formData.values()) {

  console.log(value);

}

더 자세한 사항은 아래의 링크를 참조 바란다.

https://developer.mozilla.org/en-US/docs/Web/API/FormData/keys

https://developer.mozilla.org/en-US/docs/Web/API/FormData/values

그리고 참고로 form 데이터를 ajax 통신으로 바로보내면 오류가 나는데 이때 ajax 속성 설정에서

processData: false

만 추가해주면 정상적으로 보내진다.

자세한 ajax 속성값에 대한 설명은 아래의 링크를 참조바란다.

http://hsj0511.tistory.com/205

여튼 이렇게해서 formdata를 제대로 확인도하고 안전하게 서버로 보낼수 있게 된다.