HTTP POST payload not visible in Chrome debugger?
Asked Answered
P

11

89

I have checked out this and that. However, my debugger looks like below.

Failure example

No form data, No raw content.

No form data, No raw content

Raw example (* Although path is different from the screen capture, both of them are unable to read post data)

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

NOTE: (6)

Successful example

Some of them are able to work

Differences between them I have spotted (by differentiating header contents)

Raw example (* Although path is different from the screen capture, both of them are unable to read post data)

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

NOTE: (6)

Header Difference between 2 examples

  • Successful one is using Jquery binding while failure one using HTTPS from nodejs + browserify. However, I am still finding a way to check whether this is a problem or not (Not tested)

  • Missing X-Requested-With: XMLHttpRequest. However, adding this header back to the request does not fix this problem (Tested)

  • Capital header vs Smaller letter header field (

    • content-type and Content-type. However this difference is not the root cause for my problem as tried in fiddle here (Tested)

    • Accept vs accept (Not tested)

NOTE: (5) (7)

Still, I am not sure why the first c in content-type is in small letter case.

NOTE: (1)

What I have tried

I have tried on Firefox with firebug. It is able to show my payload. However, it cannot parse response from the server :'(

Since the web server is running in HTTPS protocol, I cannot capture packets by wireshark. Any suggestion for debugging POST requests? Thanks.

Link to a gist about debugging HTTP(s) request via command line. NOTE: (3)

Wrapper I am using

I have wrap this method from nodejs with a promise calls. Below is a snippet show an option I have used.

/**
 * 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,
    };
};

Full source here

NOTE: (2)

Update

  • (1) I have verified the letter c does not affect chrome debugger. Here is the fiddle. I have tried to mimic same request with XMLHttpRequest with letter c. I can still check form data in the debugger.
  • (2) Link to the full source code
  • (3) Link to a gist from me about scripts to test HTTP(s) request
  • (4) Reformat the question for readability
  • (5) Examples are not using the same binding after code reviewing
  • (6) Add raw header example
  • (7) Add a comparison session
Posthumous answered 1/12, 2015 at 8:23 Comment(10)
Also this is only part of the code. There ought to be a http.request somewhere? Can you show the rest of the code?Augustus
See #6159433 for a complete exampleAugustus
@Augustus Thanks. For the letter c, you can take a look the screenshot of request Header. content-type instead of Content-typePosthumous
For the separate block question, there is really no such block. The screenshot contains everything in Headers tabPosthumous
For source code, fiddle herePosthumous
Let us continue this discussion in chat.Posthumous
HTTP headers names should be treated in a case-insensitive manner. Some implementations set all-lowercase headers, some don't... when matching headers, either do case-insensitive comparisons or (loop through and) force all header keys to one case.Olla
Are you using Chrome on Windows Server by any chance? I'm having the same issue and I can see Form Data on Windows 7, but not when I use Chrome on Windows Server.Epicarp
Window 7, Ubuntu 14.04 32 bit etc. Both of them are the same according to my memoryPosthumous
i am there because v98 still periodically unexpected does not show payload(whole tab for several requests)Lutist
K
131

There was a regression bug in Chrome v61 and v62 across all platforms that caused this behaviour when the response is (amongst others) a 302. This is fixed in v63 stable which was released to all desktop platforms on 6th December 2017.

Automatic updates are phased, but going to "Help" / "About Google Chrome" will force it download the update and give you a button to restart. Occasionally it is necessary to kill all Chrome process and restart it manually to get the update.

The (now closed) bug report is here. The release announcement is here.

Clearly this is not the cause of the original poster's issue back in 2015, but searches for the issue led me here. Also note this is not just an OS X issue.

Keaton answered 16/10, 2017 at 10:34 Comment(10)
I can confirm this, it is happening on Ubuntu 16.04.1 and Chrome 61Dunt
Windows user. Chrome 61 and Chrome Beta 62. Both have this bug. At first I was communicating with Play server for a login request and I thought there is a "new method" they invented which doesn't appear on Chrome Dev Tools but it turns out its because of Chrome's recession.Decrepitate
This is still a problem with windows and version 62Cadena
Not sure why using an older browser is "safe".Jeb
He said 'different' browser as opposed to older ie. use Firefox or Edge (but not IE).Pumpkinseed
4 month left and they can't fix the bug, cool. Chromium is dead for developer.Celestine
Is this limited to 302? I had a 303 w/o form data, and I can see the data posted to the endpoint.Abolish
I am using Chrome 65 beta on a Mac. I am viewing a response with status 200 and I see no request payload section. I viewed the same page with Chrome 63 on Windows and see the payload. Is this issue really fixed?Fawnfawna
I am using 67.0.3396.62 on Mac, I do not see request body. Is it possibly related to https, not http?Spouse
I have faced this issue on Version 101.0.4951.67 (Official Build) (64-bit)Astrophysics
J
18

If your application returns a 302 status code, and no payload data in Chrome Devtools, you may be hitting this Chrome bug.

If you are in development or this is a URL which won't break anything, a quick, very practical, workaround is to modify your server side code to send a 200, for example in PHP you might add:

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

which sends out a 200 status code. This works around the "302 bug" -- until it is fixed.

p.s. Per @leo-hendry below, Canary does have the fix as of Dec 2017, but if you don't have another reason to run Canary, running another browser side-by-side won't be worth it, as the mainline release should be coming out soon.

Jeb answered 13/10, 2017 at 13:21 Comment(4)
Indeed a bug! When returning 302 and a Location the form data is not showing up (tested with version 61.0.3163.100)Weekday
No. It returns a 200. But anyway, I have resolve it by an alternative in below. ThanksPosthumous
also applies to Windows users.Rankle
Thanks @Rankle updated the answer to include all platforms.Jeb
F
5

If this is a bug it may be behaving differently on Mac vs Windows.

The screenshot below is from Chrome 63 on Windows. You can see the request payload section as expected.

Good Example

Here is what I see on Chrome 65 Beta running on Mac. Notice the request payload section is missing.

Bad example

Am I correct to assume that the bug is not fixed or is there something else I should be checking?

Fawnfawna answered 2/3, 2018 at 16:24 Comment(2)
Windows; Google Chrome 66.0.3359.139. <form enctype="multipart/form-data"> with uploading a file. In Chrome Debugger->Network I can see only General, Response headers, Request headers and no form data. In Firefox I can see the whole POST raw request payload with http request headers+ ALLLLLLL data with uploaded file.Leveller
I can't see it in Chrome (on Mac) latest versions. However last week I could! Don't know what's going on.Thurstan
A
3

I just noticed that you cannot see POST data if you select "Doc" from the filters in Chrome debugger (next to All, Xhr, Css, JS...). It does show if you select "All".

Augustus answered 2/12, 2015 at 8:16 Comment(4)
Thanks. But I still cannot read POST data no matter what filter I used :'(Posthumous
POST requests show in "All" or "Other" filter. I think Chrome shows Form Data only if the response status code is 200 Ok, if it's anything else (e.g.: 302 Found) it will not show it.Granados
@Granados wait really? Why? What can I do to get around this?Vandyke
@Vandyke its actually a bug in Chrome it seems: bugs.chromium.org/p/chromium/issues/…Granados
V
3

I probably got the same problem with the Chrome console (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 and payload missing

$_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
    )
)
Valdez answered 4/10, 2018 at 8:37 Comment(3)
Aye same here - the DevTools vanishing POST bug has returned in Chrome 69 !!Lorylose
Probably got fixed as I just started to get downvotes for this. Oooh, stackoverflow... sighValdez
@ChrisS. Did you test it again after writing your answer or comment? Because I'm still running into the same problem with current versions of Opera, which is based on somewhat current versions of Chromium. I don't see any POST body even though response code is 200 and it's a plain HTML-form without any JS or fancy stuff.Kalasky
A
1

I have faced the same issue in Chrome Version 101.0.4951.67 (Official Build) (64-bit).

I did not use formData for some time, meanwhile, Chrome has been updated

FormData has been moved to separate tab Payload

enter image description here

Astrophysics answered 20/5, 2022 at 13:15 Comment(1)
It's especially easy to miss because the 2nd tab (now the 3rd) was "Preview", and a JSON payload can often look a lot like the JSON response. For example, doing a 'POST' to create a record often returns the same data + the new ID.Burchfield
O
1

check at the client side if payload which you are sending to server is must not the null

Olsewski answered 27/5, 2023 at 20:55 Comment(1)
As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.Resound
A
0

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
Augustus answered 1/12, 2015 at 10:3 Comment(7)
No errors found. However, I found that chrome is able to show Form data if Content-type is C instead of c. (same codes but get different c :'()Posthumous
By the way, thanks for the script. But I believe my problem is not source from server side since Firefox can show my input is correct and Chrome show my output from server is correct.Posthumous
In the above comment you say that it works with C, not with c. In the original question (update) you say I have verified the letter c does not affect chrome debugger. I'm confused. -- Another thought: perpahs one of your chrome extensions/plugins is messing around? Try disabling all extensions.Augustus
I have update the question. it explains what those 2 statement mean. ThanksPosthumous
Also, I have tried disabled all extensions I saw at extension page. No luck. It does not fix my problemPosthumous
Since you can now catch the HTTPS, can you compare the network traffic in "success" and "failure" cases? Alternatively, you could catch the output of the above CGI-script on both cases. I know server is not the issue, but that way you can really see what is different in the traffic the server receives.Augustus
Sorry for late reply. I have cross checked headers as you suggested. What I found have been updated in the question. Please check. ThanksPosthumous
A
0

I had another issue, when as well my POST parameters somewhere missed, even in back-end and Chrome Headers, via very simple mistake in code.

I simply wrongly declared params object, as normal array:

var params = [];

Instead of:

var params = {};

And then assigned to it params, in result of what, I got no error, but it didn't worked:

params['param1'] = 'param1';
params['param2'] = 'param2';

$.post(url, params, function(data) {... 

In this way, data was not sent or received in back-end, same as not shown because not sent in debugger. It might save for someone hour or few sometimes.

Arkwright answered 6/4, 2021 at 16:37 Comment(0)
G
0

Sometime if your form set enctype="multipart/form-data", then Chrome will not catch the request payload.

<form action="" method="POST" enctype="multipart/form-data">
</form>

REF

Gibbeon answered 19/4, 2022 at 13:44 Comment(0)
P
-4

Although this is not the answer of original question, my alternative is replacing the original implementation with the combo of form-data, es6-promise and isomorphic-fetch

All packages are able to download from npm.

It works charmly.

Posthumous answered 27/2, 2017 at 8:2 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.