development

Chrome 디버거에서 HTTP POST 페이로드가 보이지 않습니까?

big-blog 2020. 11. 23. 19:35
반응형

Chrome 디버거에서 HTTP POST 페이로드가 보이지 않습니까?


나는 이것저것 을 확인했다 . 그러나 내 디버거는 아래와 같습니다.

실패 예

양식 데이터 없음, 원시 콘텐츠 없음.

양식 데이터 없음, 원시 콘텐츠 없음

원시 예 (* 경로가 화면 캡처와 다르지만 둘 다 포스트 데이터를 읽을 수 없음)

POST https://192.168.0.7/cgi-bin/icul/;stok=554652ca111799826a1fbdafba9d3ac1/remote_command HTTP/1.1
Host: 192.168.0.7
Connection: keep-alive
Content-Length: 419
accept: application/json, text/javascript, */*; q=0.01
Origin: https://192.168.0.7
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36
content-type: application/x-www-form-urlencoded; charset=UTF-8
Referer: https://192.168.0.7/cgi-bin/icul/;stok=554652ca111799826a1fbdafba9d3ac1/smartmomentl/access-point/network
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8,zh-TW;q=0.6,zh;q=0.4
Cookie: sysauth=f15eff5e9ebb8f152e163f8bc00505c6

command=import&args=%7B%22--json%22%3Atrue%2C%22--force%22%3Atrue%2C%22--mocks%22%3A%22%7B%5C%22DEL%5C%22%3A%7B%7D%2C%5C%22SET%5C%22%3A%7B%5C%22dhcp%5C%22%3A%7B%5C%22lan%5C%22%3A%7B%5C%22.section%5C%22%3A%5C%22dhcp%5C%22%2C%5C%22interface%5C%22%3A%5C%22lan%5C%22%2C%5C%22ignore%5C%22%3A%5C%220%5C%22%2C%5C%22leasetime%5C%22%3A%5C%2212h%5C%22%2C%5C%22range%5C%22%3A%5C%22172.16.0.100-172.16.0.200%5C%22%7D%7D%7D%7D%22%7D

HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Status: 200 OK
Content-Type: text/html; charset=utf-8
Cache-Control: no-cache
Expires: 0
Transfer-Encoding: chunked
Date: Thu, 01 Jan 1970 00:09:27 GMT
Server: lighttpd/1.4.30

31
{ "ctx": "No such command", "exitStatus": false }
0

참고 : (6)

성공적인 예

그들 중 일부는 일할 수 있습니다

내가 발견 한 그들 사이의 차이점 (헤더 내용을 구별하여)

원시 예 (* 경로가 화면 캡처와 다르지만 둘 다 포스트 데이터를 읽을 수 없음)

POST https://192.168.0.7/cgi-bin/icul/;stok=92dea2b939b9fceb44ac84ac859de7f4/;stok=92dea2b939b9fceb44ac84ac859de7f4/remote_command HTTP/1.1
Host: 192.168.0.7
Connection: keep-alive
Content-Length: 53
Accept: application/json, text/javascript, */*; q=0.01
Origin: https://192.168.0.7
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: https://192.168.0.7/cgi-bin/icul/;stok=92dea2b939b9fceb44ac84ac859de7f4/remote_command/command_reboot
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8,zh-TW;q=0.6,zh;q=0.4
Cookie: sysauth=683308794904e0bedaaead33acb15c7e

command=command_reboot&args=%7B%22--json%22%3Atrue%7D

HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Status: 200 OK
Content-Type: text/html; charset=utf-8
Cache-Control: no-cache
Expires: 0
Transfer-Encoding: chunked
Date: Thu, 01 Jan 1970 00:02:46 GMT
Server: lighttpd/1.4.30

34
{ "ctx": "\u0022success\u0022", "exitStatus": true }
0

참고 : (6)

두 예의 헤더 차이점

  • 성공한 사람은 Jquery 바인딩사용 하고 실패한 사람 은 nodejs + browserify의 HTTPS를 사용 합니다. 그러나 여전히 이것이 문제인지 아닌지 확인하는 방법을 찾고 있습니다 (테스트되지 않음)

  • 누락 X-Requested-With: XMLHttpRequest. 그러나이 헤더를 요청에 다시 추가해도 문제가 해결되지 않습니다 (테스트 됨).

  • 대문자 헤더와 소문자 헤더 필드 (

    • content-typeContent-type. 그러나이 차이는 여기 바이올린에서 시도한 내 문제의 근본 원인이 아닙니다 (테스트 됨)

    • Acceptvs accept(테스트되지 않음)

참고 : (5) (7)

첫 번째 이유는 그래도, 내가하지 확신 c에가 content-type소문자 경우입니다.

참고 : (1)

내가 시도한 것

Firebug로 Firefox를 사용해 보았습니다. 내 페이로드를 표시 할 수 있습니다. 그러나 서버의 응답을 구문 분석 할 수 없습니다.

웹 서버가 HTTPS 프로토콜로 실행되기 때문에 wireshark로 패킷을 캡처 할 수 없습니다. POST 요청 디버깅에 대한 제안 사항이 있습니까? 감사.

명령 줄을 통한 HTTP (s) 요청 디버깅 에 대한 요점 링크 . 노트 3)

내가 사용하고있는 래퍼

이 메서드를 nodejs에서 프라 미스 호출로 래핑 했습니다 . 아래는 내가 사용한 옵션을 보여주는 스 니펫입니다.

/**
 * Wraps HTTPS module from nodejs with Promise
 * @module common/http_request
 */

var createRequestSetting = function (host, path, data, cookies) {
    return {
        method: 'POST',
        port:443,
        host: host,
        path: path,
        headers: {
            Accept: 'application/json, text/javascript, */*; q=0.01',
            'Content-Type':
                'application/x-www-form-urlencoded; charset=UTF-8',
            'Content-Length': Buffer.byteLength(data),
            'Cookie': cookies,
        },
        rejectUnauthorized: false,
    };
};

여기에 전체 소스

노트 2)

최신 정보

  • (1) 편지 c가 크롬 디버거에 영향을 미치지 않음을 확인했습니다 . 여기 에 바이올린이 있습니다. 나는 XMLHttpRequest편지 와 같은 요청을 모방하려고 노력했다 c. 디버거에서 양식 데이터를 확인할 수 있습니다.
  • (2) 전체 소스 코드 링크
  • (3) HTTP (s) 요청을 테스트 하기위한 스크립트에 대한 요점 링크
  • (4) 가독성을 위해 질문 형식 변경
  • (5) 예제는 코드 검토 후 동일한 바인딩을 사용하지 않습니다.
  • (6) 원시 헤더 추가 예제
  • (7) 비교 세션 추가

응답이 302 일 때이 동작을 일으킨 모든 플랫폼에서 Chrome v61 및 v62에 회귀 버그가있었습니다.이 문제는 2017 년 12 월 6 일 모든 데스크톱 플랫폼에 출시 된 v63 stable에서 수정되었습니다.

자동 업데이트는 단계적으로 진행되지만 '도움말'/ 'Google 크롬 정보'로 이동하면 업데이트를 강제로 다운로드하고 다시 시작할 수있는 버튼이 표시됩니다. 경우에 따라 모든 Chrome 프로세스를 종료하고 수동으로 다시 시작하여 업데이트를 받아야합니다.

(현재 폐쇄 된) 버그 보고서는 여기 입니다. 출시 발표는 여기에 있습니다 .

분명히 이것이 2015 년 원래 포스터 문제의 원인은 아니지만 문제를 검색 한 결과 나를 여기로 이끌었습니다. 또한 이것은 OS X 문제가 아닙니다.


애플리케이션이 302 상태 코드를 반환하고 Chrome Devtools에 페이로드 데이터가없는 경우이 Chrome 버그 가 발생할 수 있습니다 .

개발 중이거나 이것이 아무것도 중단하지 않는 URL 인 경우 빠르고 매우 실용적인 해결 방법은 서버 측 코드를 수정하여 200을 전송하는 것입니다. 예를 들어 PHP에서 다음을 추가 할 수 있습니다.

die("premature exit - send a 200");

200 상태 코드를 보냅니다. 이것은 수정 될 때까지 "302 버그"에서 작동합니다.

ps Per @ leo-hendry 아래에서 Canary는 2017 년 12 월 현재 수정 사항이 있지만 Canary를 실행할 또 다른 이유가 없다면 메인 라인 릴리스로 다른 브라우저를 나란히 실행하는 것은 그만한 가치가 없습니다. 곧 나올 것입니다.


Chrome 디버거의 필터 (All, Xhr, Css, JS ... 옆에 있음)에서 "Doc"을 선택하면 POST 데이터를 볼 수 없다는 것을 알았습니다. "모두"를 선택하면 표시됩니다.


이것이 버그 인 경우 Mac과 Windows에서 다르게 동작 할 수 있습니다.

아래 스크린 샷은 Windows의 Chrome 63에서 가져온 것입니다. 예상대로 요청 페이로드 섹션을 볼 수 있습니다.

좋은 예

다음은 Mac에서 실행되는 Chrome 65 베타에서 볼 수있는 것입니다. 요청 페이로드 섹션이 누락되었습니다.

나쁜 예

버그가 수정되지 않았거나 확인해야 할 다른 사항이 있다고 가정하는 것이 맞습니까?


Chrome 콘솔 (Chrome 69)에서도 동일한 문제가 발생했습니다.

Neither the formdata nor the payload tab is showing. In my scenario I POST a form with enctype "multipart/form-data" to an iframe (submitting an image file over https to the same origin). It works as expected but I don't know how to debug the data in chrome properly when it doesn't show up at all. I could dump the data in PHP but that's unnecessary complicated and totally missing the point of using the console. I've read through the suggested solutions above but I didn't manage to get rid of this problem. (The response code is 200 btw, not 302).

Formdata 및 페이로드 누락

$_POST = Array
(
    [xajax] => 1
    [app] => products
    [cmd] => upload
    [cat] => 575
)

$_FILES = Array
(
    [upfile] => Array
    (
        [name] => Aufkleber_Trollface.jpg
        [type] => image/jpeg
        [tmp_name] => /tmp/phpHwYkKD
        [error] => 0
        [size] => 25692
    )
)

Your code looks ok. Have you checked the Chrome console for errors? If you have access to the server (and assuming it is httpd on Linux) you could make a small CGI shell script to inspect the headers and data at that end:

#!/bin/bash

echo "Content-type: text/plain"
echo ""    
echo "Hello World. These are my environment variables:"
/usr/bin/env
if [ "$REQUEST_METHOD" = "POST" ]; then
    if [ "$CONTENT_LENGTH" -gt 0 ]; then
        echo "And this is my POST data:"
        /bin/cat
    fi
fi
exit 0

이것이 원래 질문에 대한 대답은 아니지만 제 대안은 원래 구현을 form-data , es6-promiseisomorphic-fetch 의 조합으로 대체하는 것입니다.

모든 패키지는 npm에서 다운로드 할 수 있습니다.

그것은 매력적으로 작동합니다.

참고 URL : https://stackoverflow.com/questions/34015735/http-post-payload-not-visible-in-chrome-debugger

반응형