Chrome 개발 도구 네트워크 탭에 표시된 '요청 페이로드'와 '양식 데이터'의 차이점

지원 해야하는 오래된 웹 응용 프로그램이 있습니다 (작성하지 않았습니다).

양식을 작성하고 제출 한 다음 Chrome에서 '네트워크'탭을 확인하면 일반적으로 '양식 데이터'가 표시되는 '요청 페이로드'가 표시됩니다. 이 둘의 차이점은 무엇이며 언제 하나 대신 다른 하나가 전송됩니까?

이것을 구글 검색했지만 실제로 이것을 설명하는 정보를 찾지 못했습니다 (JavaScript 앱을 가져 와서 "요청 페이로드"대신 "양식 데이터"를 보내려는 사람들).

요청 페이로드-또는 더 정확하게 말하면 HTTP 요청의 페이로드 본문은 일반적으로 POST 또는 PUT 요청에 의해 전송되는 데이터 입니다. 그것은 헤더와 이후의 부분 CRLF(A)의 HTTP 요청 .

요청 Content-Type: application/json은 다음과 같습니다.

POST /some-path HTTP/1.1
Content-Type: application/json

{ "foo" : "bar", "name" : "John" }

AJAX 당 이것을 제출하면 브라우저는 단순히 페이로드 본문으로 제출중인 것을 보여줍니다. 데이터가 어디에서 오는지 전혀 모르기 때문에 이것이 가능한 전부입니다.

당신과 함께 HTML 양식을 제출하는 경우 method="POST"와 Content-Type: application/x-www-form-urlencoded또는 Content-Type: multipart/form-data귀하의 요청은 다음과 같이 보일 수 있습니다 :

POST /some-path HTTP/1.1
Content-Type: application/x-www-form-urlencoded

foo=bar&name=John

이 경우 양식 데이터는 요청 페이로드입니다. 여기서 브라우저는 더 많은 것을 알고 있습니다. bar는 제출 된 양식의 입력 필드 foo의 값이라는 것을 알고 있습니다. 그리고 그것이 당신에게 보여주는 것입니다.

따라서 Content-Type데이터 제출 방식은 다르지만 다릅니다 . 두 경우 모두 데이터는 메시지 본문에 있습니다. 그리고 Chrome은 개발자 도구에서 데이터가 표시되는 방식을 구별합니다.

Chrome에서 'Content-Type : application / json' 이있는 요청은 Request PayedLoad로 표시되고 데이터를 json 객체로 보냅니다.

그러나 'Content-Type : application / x-www-form-urlencoded'요청 은 양식 데이터를 표시하고 데이터를 Key : Value Pair 로 보냅니다 . 따라서 하나의 키에 객체 배열이 있으면 해당 키의 값을 평탄화 합니다.

{ Id: 1, 
name:'john', 
phones:[{title:'home',number:111111,...},
        {title:'office',number:22222,...}]
}

보낸다

{ Id: 1, 
name:'john', 
phones:[object object]
phones:[object object]
}